/**
 * @file
 * Details: a bordered panel with a chevron that turns when open.
 */

:where(.gdrfad-dds) .dds-details,
.gdrfad-dds-embedded .dds-details {
  border: 1px solid var(--surface-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-surface);
}

:where(.gdrfad-dds) .dds-details__summary,
.gdrfad-dds-embedded .dds-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-gap-md);
  min-block-size: 56px;
  padding-inline: var(--padding-padding-lg);
  border-radius: inherit;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

:where(.gdrfad-dds) .dds-details__summary::-webkit-details-marker,
.gdrfad-dds-embedded .dds-details__summary::-webkit-details-marker {
  display: none;
}

:where(.gdrfad-dds) .dds-details__summary:hover,
.gdrfad-dds-embedded .dds-details__summary:hover {
  background: var(--surface-surface-container-low);
}

:where(.gdrfad-dds) .dds-details__chevron,
.gdrfad-dds-embedded .dds-details__chevron {
  color: var(--surface-on-surface-variant);
  transition: transform var(--motion-base) var(--ease-out);
}

:where(.gdrfad-dds) .dds-details[open] > .dds-details__summary .dds-details__chevron,
.gdrfad-dds-embedded .dds-details[open] > .dds-details__summary .dds-details__chevron {
  transform: rotate(180deg);
}

:where(.gdrfad-dds) .dds-details__body,
.gdrfad-dds-embedded .dds-details__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-lg);
  padding: 0 var(--padding-padding-lg) var(--padding-padding-lg);
}