@layer components {
  .sidebar-menu {
    block-size: var(--size-full);
    display: flex;
    flex-direction: column;
    row-gap: var(--size-4);
  }

  .sidebar-menu__button {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: none;
    --btn-font-weight: var(--font-normal);
    --btn-inline-size: var(--size-full);
    --btn-justify-content: start;
    --btn-outline-size: 0;
    --btn-padding: var(--size-1) var(--size-2);

    &[aria-current="page"] {
      --btn-background: var(--color-border-light);
    }

    &:focus-visible {
      --btn-background: var(--color-border-light);
    }

    &:is(summary) {
      &::after {
        background-color: currentColor;
        block-size: var(--size-4);
        content: "";
        inline-size: var(--size-4);
        margin-inline-start: auto;
        mask-image: url("/assets/chevron-right-cefe893c.svg");
        mask-size: cover;
        min-inline-size: var(--size-4);
        transition: transform var(--time-200);
      }

      details[open]>&::after {
        transform: var(--rotate-90);
      }

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

  .sidebar-menu__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
    overflow-y: auto;
    row-gap: var(--size-4);
  }

  .sidebar-menu__group {
    display: flex;
    flex-direction: column;
  }

  .sidebar-menu__group-label {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--size-1_5) var(--size-2);
  }

  .sidebar-menu__items {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-1);
  }

  .sidebar-menu__sub {
    border-inline-start-width: var(--border);
    display: flex;
    flex-direction: column;
    margin-inline-start: var(--size-4);
    padding: var(--size-0_5) var(--size-2);
    row-gap: var(--size-1);
  }
}