:host {
  display: block;
}

details {
  --border-radius-default: var(--pine-border-radius-100);
  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
  --color-content-background-default: var(--pine-color-white);
  --color-background-hover: var(--pine-color-grey-300);
  --color-text-default: var(--pine-color-charcoal-200);
  --color-text-active: var(--pine-color-charcoal-500);
  --color-text-hover: var(--pine-color-charcoal-300);
  --number-animation-transform-timing: 200ms;
  --spacing-details-padding-inline: var(--pine-spacing-150);
  --spacing-summary-padding-block: var(--pine-spacing-050);
  --spacing-summary-padding-inline-start: var(--pine-spacing-100);
  --spacing-summary-padding-inline-end: var(--pine-spacing-050);
  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
  border-radius: var(--border-radius-default);
  padding-inline: var(--spacing-details-padding-inline);
}
details pds-icon {
  transform: scaleY(1);
  transition: transform var(--number-animation-transform-timing);
}

/* stylelint-disable-next-line */
details[open] {
  background-color: var(--color-content-background);
}
details[open] summary {
  color: var(--color-text-active);
  font: var(--typography-default);
}
details[open] summary pds-icon {
  transform: scaleY(-1);
  transition: transform var(--number-animation-transform-timing);
}

summary {
  border-radius: var(--border-radius-default);
  color: var(--color-text-default);
  font: var(--typography-default);
  padding-block: var(--spacing-summary-padding-block);
  padding-inline-end: var(--spacing-summary-padding-inline-end);
  padding-inline-start: var(--spacing-summary-padding-inline-start);
  /* stylelint-disable-next-line */
  align-items: center;
  display: flex;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  background: var(--color-background-hover);
  color: var(--color-text-hover);
  cursor: pointer;
}
summary:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}
summary pds-icon {
  margin-inline-start: auto;
}