@layer components {
  .fragment-sidebar {
    @apply hidden md:flex;
  }

  .fragment-sidebar__collapsed {
    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 transition-all;
  }

  .fragment-sidebar__collapsed-body {
    @apply w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
  }

  .fragment-sidebar__collapsed-footer {
    @apply w-20 items-center flex flex-col gap-8 px-3 pb-8;
  }

  .fragment-sidebar__expanded {
    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 overflow-hidden transition-all;
  }

  .fragment-sidebar__expanded-body {
    @apply w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
  }

  .fragment-sidebar__expanded-footer {
    @apply w-72 flex flex-col gap-8 px-3 pb-8;
  }

  .fragment-sidebar__placeholder {
    @apply transition-all h-screen;
  }

  .fragment-sidebar__layout-button-wrapper {
    @apply fixed top-6 transition-all;
  }

  .fragment-sidebar__layout-button {
    @apply h-6! w-6!;
  }

  .fragment-sidebar__bottom-nav {
    @apply fixed md:hidden z-50 bottom-0 bg-background flex w-full gap-2 px-2 py-1 border-t border-border;
    & > *:nth-child(n+5):not(:last-child) {
      @apply hidden;
    }

    & > *,
    & > * > *,
    & > * > * > * {
      @apply h-12 flex-1 w-full;
    }
  }

  .fragment-sidebar__bottom-nav-badge {
    @apply -top-0.5 -right-2.5;
  }

  .fragment-sidebar__modal-body {
    @apply flex flex-col gap-8;
  }

  .fragment-sidebar__modal-footer {
    @apply flex flex-col gap-8;
  }

  .fragment-sidebar__collapsed-nav {
    @apply flex flex-col gap-1;
    & svg {
      @apply size-5! shrink-0 self-center;
    }
  }

  .fragment-sidebar__item--center {
    @apply my-auto max-w-full;
  }

  .fragment-sidebar__item--bottom {
    @apply mt-auto max-w-full sticky bottom-0;
  }

  .fragment-sidebar__accordion {
    @apply p-1;
  }

  .fragment-sidebar__nav-badge {
    @apply ml-auto;
  }

  .fragment-sidebar__user-popover {
    min-width: 256px;
  }

  .fragment-sidebar__user-trigger {
    @apply justify-start;
  }

  .fragment-sidebar__user-info {
    @apply flex items-center gap-2 px-2;
  }

  .fragment-sidebar__user-text {
    @apply flex flex-col items-start;
  }

  .fragment-sidebar__custom-item {
    @apply px-2;
  }

  .fragment-sidebar__nav {
    @apply text-sm;

    .list-box-item {
      @apply px-3! pr-1! py-1! h-10!;
    }

    & svg {
      @apply size-5 shrink-0 self-center;
    }
  }

  .fragment-sidebar__accordion-trigger {
    @apply w-full flex items-center gap-3 h-10 px-3 pr-1 py-1 rounded-2xl text-sm font-normal cursor-pointer
           text-foreground transition-colors;
    &:hover, &[data-hovered="true"] {
      @apply bg-default!;
    }
    & > .fragment-sidebar__accordion-label {
      @apply flex-1 text-left;
    }
  }

  .fragment-sidebar__accordion-trigger--active {
    @apply text-accent-soft-foreground;
  }

  .fragment-sidebar__accordion-trigger .accordion__indicator {
    @apply w-8! shrink-0;
  }

  .fragment-sidebar__accordion-indicator {
    @apply size-4 transition-transform duration-200;
    [data-expanded] & {
      @apply rotate-90;
    }
  }

  .fragment-sidebar__tree-list {
    @apply relative pl-7;
    &::before {
      content: '';
      @apply absolute top-0 bottom-0 w-px bg-foreground opacity-15 rounded-full left-5;
    }
    .list-box {
      @apply overflow-visible;
    }
  }

  .fragment-sidebar__nav-item--active {
    @apply bg-accent-soft! text-accent-soft-foreground!;
  }

  .fragment-sidebar__sub-item {
    @apply pl-8! relative;
    &::before {
      content: '';
      @apply absolute -left-3 ml-px top-1/2 -translate-y-1/2 w-3 h-px bg-foreground opacity-15;
    }
  }

  .fragment-sidebar__collapsed-subnav-label {
    @apply px-3 py-2 text-xs font-medium opacity-60;
  }

  /* Layout modifier variants */
  .fragment-sidebar--auto {
    .fragment-sidebar__expanded {
      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
    }
    .fragment-sidebar__placeholder {
      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
    }
    .fragment-sidebar__layout-button-wrapper {
      @apply left-20 translate-x-1/2 rotate-180 xl:left-72 xl:-translate-x-1/2 xl:rotate-0;
    }
    .fragment-sidebar__collapsed {
      @apply xl:opacity-0;
    }
  }

  .fragment-sidebar--collapsed {
    .fragment-sidebar__expanded {
      @apply w-20 opacity-0 pointer-events-none;
    }
    .fragment-sidebar__placeholder {
      @apply w-20 opacity-0 pointer-events-none;
    }
    .fragment-sidebar__layout-button-wrapper {
      @apply left-20 translate-x-1/2 rotate-180;
    }
  }

  .fragment-sidebar--expanded {
    .fragment-sidebar__collapsed {
      @apply opacity-0;
    }
    .fragment-sidebar__expanded {
      @apply w-72;
    }
    .fragment-sidebar__placeholder {
      @apply w-72;
    }
    .fragment-sidebar__layout-button-wrapper {
      @apply left-72 -translate-x-1/2;
    }
  }
}