/**
 * @file
 * Details.
 */

:root {
  --accordion-spacer: 1rem;
}

details {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--accordion-spacer) var(--accordion-spacer) 0;
}

details[open] {
  padding: var(--accordion-spacer);
}

details summary {
  font-weight: bold;
  margin: calc(var(--accordion-spacer) * -1) calc(var(--accordion-spacer) * -1) 0;
  padding: var(--accordion-spacer);
  transition: background-color var(--animation-speed) ease;
}

details:hover summary {
  background-color: var(--base-color-light);
}

details summary .sc-heading {
  display: inline;
}

details[open] summary {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--accordion-spacer);
  background-color: var(--base-color-light);
}

@media screen and (min-width: 576px) {
  :root {
    --accordion-spacer: 1.5rem;
  }
}