:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --hide-duration: The length of the hide transition.
 * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.
 * @prop --show-duration: The length of the show transition.
 * @prop --show-timing-function: The timing function (easing) to use for the show transition.
 */
:host {
  --hide-duration: var(--sl-transition-medium);
  --hide-timing-function: ease;
  --show-duration: var(--sl-transition-medium);
  --show-timing-function: ease;
  display: block;
}

.details {
  border: solid 1px var(--sl-color-gray-200);
  border-radius: var(--sl-border-radius-medium);
  overflow-anchor: none;
}

.details--disabled {
  opacity: 0.5;
}

.details__header {
  display: flex;
  align-items: center;
  border-radius: inherit;
  padding: var(--sl-spacing-medium);
  user-select: none;
  cursor: pointer;
}
.details__header:focus {
  outline: none;
}

.focus-visible .details__header:focus {
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}

.details--disabled .details__header {
  cursor: not-allowed;
}
.details--disabled .details__header:focus {
  outline: none;
  box-shadow: none;
}

.details__summary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.details__summary-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  transition: var(--sl-transition-medium) transform ease;
}

.details--open .details__summary-icon {
  transform: rotate(90deg);
}

.details__body {
  height: 0;
  overflow: hidden;
  transition-property: height;
  transition-duration: var(--hide-duration);
  transition-timing-function: var(--hide-timing-function);
}

.details--open .details__body {
  transition-duration: var(--show-duration);
  transition-timing-function: var(--show-timing-function);
}

.details__content {
  padding: var(--sl-spacing-medium);
}