/**
 * @file
 * Collapsible form sections (BEM block "details", templates/form/details.html.twig).
 */

.details {
  display: block;
  margin: 0 0 1.5rem;
  color: inherit;
  background-color: var(--imtm-color-white);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius-lg);
}

.details__summary {
  position: relative;
  display: block;
  padding-block: 0.875rem;
  padding-inline: 2.75rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--imtm-color-text);
  overflow-wrap: break-word;
  hyphens: auto;
  list-style: none;
  cursor: pointer;
  background-color: var(--imtm-color-surface-light);
  border-radius: calc(var(--imtm-radius-lg) - 1px);
  transition: background-color var(--imtm-transition);
}

.details__summary:hover {
  background-color: var(--imtm-color-surface);
}

.details__summary:focus {
  outline: 0;
}

.details__summary:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

.details[open] > .details__summary {
  border-bottom: 1px solid var(--imtm-color-gray-25);
  border-radius: calc(var(--imtm-radius-lg) - 1px) calc(var(--imtm-radius-lg) - 1px) 0 0;
}

.details__summary::-webkit-details-marker {
  display: none;
}

.details__summary::marker {
  content: "";
}

/* Chevron: points right when closed, down when open. */
.details__summary::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 1.125rem;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--imtm-transition);
}

.details[open] > .details__summary::before {
  margin-block-start: -2px;
  transform: translateY(-50%) rotate(135deg);
}

.details--error {
  border-color: var(--imtm-form-error-color);
}

.details--error > .details__summary {
  color: var(--imtm-form-error-color);
}

.details__wrapper {
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0;
}

.details__wrapper > .form-item__error-message {
  margin: 0 0 1rem;
}

.details__description {
  margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .details__summary::before {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .details__wrapper {
    padding: 1rem 1rem 1.25rem;
  }
}