@layer components {
  .rs-accordion {
    display: grid;
    border-block: 1px solid var(--rs-color-border-neutral-faded);
  }

  .rs-accordion > details {
    border-block-end: 1px solid var(--rs-color-border-neutral-faded);
  }

  .rs-accordion > details:last-child {
    border-block-end: 0;
  }

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

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

  .rs-accordion 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-accordion details[open] summary::after,
  .rs-accordion details:open summary::after {
    transform: rotate(180deg);
  }

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

  .rs-accordion details:is([open], :open)::details-content {
    content-visibility: visible;
    padding-block-end: var(--rs-unit-x4);
  }
}