@layer components {
  .rs-details {
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    background: var(--rs-color-background-elevation-base);
  }

  .rs-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-unit-x3);
    padding: var(--rs-unit-x4);
    font-weight: var(--rs-font-weight-medium);
    list-style: none;
  }

  .rs-details > summary::-webkit-details-marker {
    display: none;
  }

  .rs-details > summary::after {
    content: "";
    flex: none;
    inline-size: var(--rs-unit-x4);
    block-size: var(--rs-unit-x4);
    background: currentcolor;
    mask: var(--rs-icon-chevron-down) center / contain no-repeat;
    transition: transform var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-details:is([open], :open) > summary::after {
    transform: rotate(180deg);
  }

  .rs-details::details-content {
    content-visibility: hidden;
    overflow: clip;
    border-block-start: 0;
    padding: 0;
    color: var(--rs-color-foreground-neutral-faded);
  }

  .rs-details:is([open], :open)::details-content {
    content-visibility: visible;
    border-block-start: 1px solid var(--rs-color-border-neutral-faded);
    padding: var(--rs-unit-x4);
  }
}