@layer components {
  [data-coco][data-component="app-sidebar-nav-item"] {
    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none cursor-pointer;
    @apply flex items-center justify-center px-4 w-full flex-col;

    &[href] {
      @apply hover:text-content-light-1;
    }

    .nav-item-icon {
      @apply block mx-auto transition-colors;
      @apply w-6 h-6;
    }

    .nav-item-label {
      @apply block font-semibold text-label-xxs transition-colors mt-0.5 cursor-pointer;
    }

    &.emphasised {
      .nav-item-icon {
        @apply sm:text-content-primary-inverse-vivid;
      }
    }

    &.active {
      @apply text-content-light-1;
    }

    &:hover {
      .nav-item-icon {
        @apply text-content-light-1;
      }

      &.emphasised .nav-item-icon {
        @apply sm:text-content-primary-inverse-vivid;
      }

      .nav-item-label {
        @apply text-content-light-1;
      }
    }

    @media screen(sm) {
      @apply sidebar-nav-item-vertical-condensed;
    }

    @media screen(lg) {
      @apply sidebar-nav-item-vertical;
    }

    @media screen(letterbox) {
      @apply sidebar-nav-item-vertical-condensed;
    }
  }

  .sidebar-nav-menu {
    @apply bg-content-dark-2 shadow-md sm:rounded-r-md overflow-hidden divide-y divide-content-dark-muted/20;

    [data-placement="bottom"] & {
      @apply rounded-b-md;
    }

    [data-placement="top"] & {
      @apply rounded-t-md;
    }

    .sidebar-nav-menu-select {
      @apply focus:ring-0 bg-transparent hover:bg-content-dark-1 active:bg-content-dark-1 border-0 text-content-light-2 w-full font-semibold;
    }

    .sidebar-nav-menu-item {
      @apply flex w-full items-center p-3 text-center no-underline bg-content-dark-2 text-content-dark-muted transition;
    }

    .coco-link.sidebar-nav-menu-item {
      @apply hover:bg-content-dark-1;
    }

    .sidebar-nav-menu-item-text {
      @apply truncate min-w-0 font-semibold text-content-light-1 transition-colors;
    }

    .sidebar-nav-menu-item-qualifier {
      @apply ml-auto text-label-sm flex-none pl-4;
    }

    @apply sidebar-nav-menu-large;

    @media screen(sm) {
      @apply sidebar-nav-menu-small;
    }

    @media screen(lg) {
      @apply sidebar-nav-menu-large;
    }

    @media screen(letterbox) {
      @apply sidebar-nav-menu-small;
    }
  }
}

@layer utilities {
  .sidebar-nav-item-vertical-condensed {
    @apply block px-2 py-4;

    &[href] {
      @apply hover:bg-content-dark-1;
    }

    .nav-item-icon {
      @apply w-7 h-7;
    }

    .nav-item-label {
      @apply mt-1 text-label-xxs;
    }

    &.active {
      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
    }
  }

  .sidebar-nav-item-vertical {
    @apply py-5;

    &[href] {
      @apply hover:bg-content-dark-1;
    }

    .nav-item-icon {
      @apply w-8 h-8;
    }

    .nav-item-label {
      @apply text-label-xs;
    }

    &.active {
      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
    }
  }

  .sidebar-nav-menu-small {
    .sidebar-nav-menu-select {
      @apply text-sm;
    }

    .sidebar-nav-menu-item {
      @apply text-sm;
      width: 240px;
    }
  }

  .sidebar-nav-menu-large {
    .sidebar-nav-menu-select {
      @apply text-base;
    }

    .sidebar-nav-menu-item {
      @apply text-base;
      width: 280px;
    }
  }
}