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

.sidebar-menu__button {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-font-weight: var(--font-normal);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-inline-size: var(--size-full);
  --btn-padding: var(--size-2);
  --btn-hover-color: light-dark(var(--blue-100), var(--stone-800));

  &[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-direction: column;
  row-gap: var(--size-4);
  overflow-y: auto;
}

.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-2);
}

.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);
}

/* Toggle icon animation */
.sidebar-menu #color-scheme-btn .icon,
.sidebar-menu__items .sidebar-menu__button .icon,
.sidebar-menu__toggle-icon {
  transition: transform var(--time-200);
  block-size: var(--size-5);
  inline-size: var(--size-5);
  min-block-size: var(--size-5);
  min-inline-size: var(--size-5);
}

/* let the menu btn padding control padding */
.sidebar-menu #color-scheme-btn>button {
  padding: 0;
}

.sidebar-menu__toggle:checked~.sidebar-layout .sidebar-menu__toggle-icon {
  transform: var(--rotate-180);
}

/* Hide text elements when collapsed */
.sidebar-menu__toggle:checked~.sidebar-layout .sidebar-menu__text,
.sidebar-menu__toggle:checked~.sidebar-layout .sidebar-menu__chevron,
.sidebar-menu__toggle:checked~.sidebar-layout .sidebar-menu__group-label {
  display: none;
}

/* Hide submenu when collapsed */
.sidebar-menu__toggle:checked~.sidebar-layout .sidebar-menu__sub {
  display: none;
}

/* Center icons when collapsed */
.sidebar-menu__toggle:checked~.sidebar-layout .sidebar-menu__button {
  --btn-justify-content: center;
}

/* sidebar logo text */
.sidebar-logo-text {
  letter-spacing: -2px;
  font-weight: 700;
}


/* Customizations  */
.sidebar-menu__button span.icon {
  --icon-color: light-dark(rgb(108 121 131), rgb(143 153 160));
}

.sidebar-menu__button.active {
  background: var(--color-selected);
  color: light-dark(#30415a, white);

  >span.icon {
    --icon-color: light-dark(#66758b, white);
  }
}

/* Branch switching button */
#branch-switcher>button {
  --btn-radius: var(--rounded-full);
  --btn-padding: var(--size-0_5) var(--size-3);
  max-inline-size: fit-content;
  align-self: start;
  color: white;
  background: #507ebf;
  margin-inline-start: 7px;
}

#branch-switcher.dev>button {
  background: oklch(0.75 0.19 67.74);
}

.sidebar-menu__toggle:checked~.sidebar-layout #branch-switcher button {
  align-self: center;
}