details {
  --details-border: 0.0625rem solid var(--color-border-subtle);
  --details-direction: column;
  --details-display: flex;
  --details-gap: 0rem;
  --details-height: max-content;
  --details-justify: flex-start;
  --details-padding-inline: 1.5rem;
  --details-padding-block: 1rem;
  --details-radius: 0;
  --details-width: 100%;
  --details-max-height-closed: 6.25rem;
  --details-max-height-open: 50rem;
  --summary-align: center;
  --summary-cursor: pointer;
  --summary-display: flex;
  --summary-gap: 0.5rem;
  --summary-justify: flex-start;
  --summary-transitions: all 0.75s ease-in-out;

  interpolate-size: allow-keywords;
  display: var(--details-display);
  flex-direction: var(--details-direction);
  justify-content: var(--details-justify);
  gap: var(--details-gap);
  width: var(--details-width);
  border: var(--details-border);
  border-left: none;
  border-right: none;
  transition: var(--summary-transitions);
  max-height: var(--details-max-height-closed);
  overflow: clip;

  @starting-style {
    transition: var(--summary-transitions);
  }

  & + details {
    border-radius: 0; // remove radius from middle elements
    border-top: none; // optional: remove double borders
  }

  &:first-of-type {
    border-radius: var(--details-radius) var(--details-radius) 0 0;
  }

  &:last-of-type {
    border-radius: 0 0 var(--details-radius) var(--details-radius);
  }

  // If it's the only details element, keep original radius
  &:only-of-type {
    border-radius: var(--details-radius);
  }

  &::marker {
    content: none;
  }

  summary {
    display: var(--summary-display);
    justify-content: var(--summary-justify);
    align-items: var(--summary-align);
    padding-inline: var(--summary-padding-inline, var(--details-padding-inline));
    padding-block: var(--summary-padding-block, var(--details-padding-block));
    gap: var(--summary-gap);
    list-style: none;
    border-top-left-radius: var(--details-radius);
    border-top-right-radius: var(--details-radius);
    transition: var(--summary-transitions);

    &::-webkit-details-marker {
      display: none;
    }

    &:focus-within {
      outline: none;
      border-bottom: solid 2px currentColor;
      background-color: var(--color-surface-secondary);
    }

    /* This ensures no bullet points are shown */
    &:hover {
      cursor: var(--summary-cursor);
    }
    > section {
      width: var(--details-width);
    }
  }

  .list-styles {
    summary {
      border-left: none;
      border-right: none;
    }
  }

  > section {
    padding-inline: var(--details-padding-inline);
    padding-block: var(--details-padding-block);
    margin-block-start: 0;
    border: 1px transparent solid;
  }

  &[open] {
    max-height: max-content;
    transition: var(--summary-transitions);
    > summary {
      border-bottom: var(--details-border);
    }
    > section {
      max-height: var(--details-max-height-open);
      @starting-style {
        max-height: 0;
      }
    }
  }

  @supports (transition-behavior: allow-discrete) {
    @starting-style {
      max-height: 0;
      transition: var(--summary-transitions);
    }
  }
}