.ga-side-navigation {
  @apply shadow-north flex h-full w-80 flex-col rounded bg-(--ga-color-surface-primary) p-1;

  .ga-side-navigation__header {
    @apply relative z-10 flex shrink-0 flex-col;
  }

  .ga-side-navigation__switcher {
    @apply relative flex cursor-pointer items-center justify-between gap-2 rounded p-3 outline-none;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus-visible {
      &::after {
        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
      }
    }

    &:active {
      .ga-side-navigation__switcher-title {
        @apply font-semibold;
      }
    }

    &.ga-side-navigation__switcher--active {
      @apply bg-(--ga-color-surface-selected);

      .ga-side-navigation__switcher-title {
        @apply font-semibold;
      }
    }
  }

  .ga-side-navigation__switcher-title {
    @apply min-w-0 flex-1 truncate text-left text-lg font-medium text-(--ga-color-text-action);
  }

  .ga-side-navigation__switcher-action {
    @apply flex shrink-0 cursor-pointer items-center py-2 text-(--ga-color-icon-secondary);

    &:hover {
      @apply text-(--ga-color-icon-action);
    }
  }

  .ga-side-navigation__switcher-dropdown {
    @apply shadow-north absolute top-full right-0 left-0 z-10 flex max-h-80 flex-col overflow-y-auto rounded bg-(--ga-color-surface-primary) px-2 pt-4 pb-2;
  }

  .ga-side-navigation__switcher-dropdown-header {
    @apply px-4 pt-1 pb-1 text-sm font-semibold text-(--ga-color-text-disable-selected) uppercase;
  }

  .ga-side-navigation__switcher-dropdown-item {
    @apply animate-hover relative flex cursor-pointer items-center gap-2 rounded p-4 text-left transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus-visible {
      @apply outline-none;

      &::after {
        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
      }
    }

    &:active {
      .ga-side-navigation__switcher-dropdown-title {
        @apply font-semibold;
      }
    }
  }

  .ga-side-navigation__switcher-dropdown-title {
    @apply text-md min-w-0 flex-1 truncate text-left font-medium text-(--ga-color-text-action);
  }

  .ga-side-navigation__switcher-dropdown-external {
    @apply h-4 w-4 shrink-0 self-center text-(--ga-color-icon-secondary);
  }

  .ga-side-navigation__search {
    @apply mx-3 my-2;

    &.ga-input {
      @apply w-auto;

      &:not(:hover) {
        @apply border-(--ga-color-surface-page) bg-(--ga-color-surface-page);
      }

      input::-webkit-search-cancel-button {
        @apply hidden;
      }
    }
  }

  .ga-side-navigation__search-shortcut {
    @apply font-inter shrink-0 cursor-default rounded border border-(--ga-color-border-disabled) bg-white px-1 py-px text-xs text-(--ga-color-icon-on-disabled);
  }

  .ga-side-navigation__body {
    @apply flex flex-1 flex-col overflow-y-auto px-3 py-2;
  }

  .ga-side-navigation__item {
    @apply text-md animate-hover relative flex cursor-pointer flex-row items-center gap-3 rounded px-4 py-3 text-left transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus,
    &:focus-visible {
      @apply outline-none;
    }

    &:active:not(.ga-side-navigation__item--disabled) {
      .ga-side-navigation__item-label {
        @apply font-medium;
      }
    }

    &.ga-side-navigation__item--active {
      @apply bg-(--ga-color-surface-selected);

      &::before {
        @apply absolute top-1/2 left-0 h-8 w-1 -translate-y-1/2 rounded-r bg-(--ga-color-surface-action) content-[''];
      }

      .ga-side-navigation__item-label {
        @apply font-semibold;
      }
    }

    &.ga-side-navigation__item--expanded {
      .ga-side-navigation__item-label {
        @apply font-semibold;
      }
    }

    &.ga-side-navigation__item--disabled {
      @apply cursor-not-allowed;

      &:hover {
        @apply bg-transparent;
      }

      .ga-side-navigation__item-icon {
        @apply text-(--ga-color-icon-disabled);
      }

      .ga-side-navigation__item-label {
        @apply text-(--ga-color-text-disabled);
      }
    }
  }

  .ga-side-navigation__item--level-2 {
    @apply pl-10;
  }

  .ga-side-navigation__item--level-3 {
    @apply pl-16;
  }

  .ga-side-navigation__item--level-4 {
    @apply pl-22;
  }

  .ga-side-navigation__item--level-5 {
    @apply pl-28;
  }

  .ga-side-navigation__item--level-6 {
    @apply pl-34;
  }

  .ga-side-navigation__item-icon {
    @apply h-4 w-4 shrink-0 text-(--ga-color-icon-primary);
  }

  .ga-side-navigation__item-content {
    @apply flex min-w-0 flex-1 flex-col;
  }

  .ga-side-navigation__item-label {
    @apply text-md truncate text-(--ga-color-text-action);
  }

  .ga-side-navigation__item-description {
    @apply truncate text-xs text-(--ga-color-text-secondary);
  }

  .ga-side-navigation__item-external {
    @apply h-4 w-4 shrink-0 self-center text-(--ga-color-icon-secondary);
  }

  .ga-side-navigation__recent-title {
    @apply px-4 py-3 text-sm font-medium text-(--ga-color-text-disable-selected) uppercase;
  }

  .ga-side-navigation__recent-item {
    @apply animate-hover relative flex cursor-pointer flex-row items-center gap-3 rounded py-2 pl-4 text-left transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus,
    &:focus-visible {
      @apply outline-none;
    }
  }

  .ga-side-navigation__recent-item-icon {
    @apply shrink-0 text-(--ga-color-icon-primary);
  }

  .ga-side-navigation__recent-item-content {
    @apply flex min-w-0 flex-col;
  }

  .ga-side-navigation__recent-item-label {
    @apply text-md truncate leading-6 font-medium text-(--ga-color-text-action);
  }

  .ga-side-navigation__recent-item-description {
    @apply truncate text-xs text-(--ga-color-text-on-disabled);
  }

  .ga-side-navigation__search-results-title {
    @apply px-6 text-sm leading-6 font-medium text-(--ga-color-text-disable-selected);
  }

  .ga-side-navigation__search-results-item {
    @apply animate-hover relative mx-3 flex cursor-pointer flex-row items-center gap-3 rounded px-3 py-2 text-left transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus-visible {
      @apply outline-none;

      &::after {
        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
      }
    }
  }

  .ga-side-navigation__search-results-item-content {
    @apply flex min-w-0 flex-1 flex-col;
  }

  .ga-side-navigation__search-results-item-label {
    @apply text-md truncate leading-6 font-medium text-(--ga-color-text-action);
  }

  .ga-side-navigation__search-results-item-description {
    @apply truncate text-xs text-(--ga-color-text-on-disabled);
  }

  .ga-side-navigation__search-results-item-external {
    @apply h-4 w-4 shrink-0 self-center text-(--ga-color-icon-secondary);
  }

  .ga-side-navigation__footer {
    @apply relative z-10 shrink-0 border-t border-(--ga-color-border-tertiary) pt-1;
  }

  .ga-side-navigation__user {
    @apply relative flex cursor-pointer items-center gap-3 rounded px-4 py-3 outline-none;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus-visible {
      &::after {
        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
      }
    }

    &.ga-side-navigation__user--active {
      @apply bg-(--ga-color-surface-selected);
    }
  }

  .ga-side-navigation__user-avatar {
    @apply h-10 w-10 shrink-0 rounded-full;
  }

  .ga-side-navigation__user-name {
    @apply text-md flex-1 truncate font-medium text-(--ga-color-text-body);
  }

  .ga-side-navigation__user-action {
    @apply flex shrink-0 cursor-pointer items-center text-(--ga-color-icon-secondary);

    &:hover {
      @apply text-(--ga-color-icon-action);
    }
  }

  .ga-side-navigation__footer-dropdown {
    @apply shadow-south absolute right-0 bottom-full left-0 z-10 flex max-h-80 flex-col overflow-y-auto rounded bg-(--ga-color-surface-primary) p-3;
  }

  .ga-side-navigation__footer-dropdown-item {
    @apply animate-hover relative flex cursor-pointer items-center gap-3 rounded py-3 pr-2 pl-4 text-left transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);
    }

    &:focus-visible {
      @apply outline-none;

      &::after {
        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
      }
    }

    &:active {
      .ga-side-navigation__footer-dropdown-title {
        @apply font-semibold;
      }
    }

    &.ga-side-navigation__footer-dropdown-item--disabled {
      @apply cursor-not-allowed;

      &:hover {
        @apply bg-transparent;
      }

      .ga-side-navigation__footer-dropdown-icon {
        @apply text-(--ga-color-icon-disabled);
      }

      .ga-side-navigation__footer-dropdown-title {
        @apply text-(--ga-color-text-disabled);
      }
    }
  }

  .ga-side-navigation__footer-dropdown-icon {
    @apply h-4 w-4 shrink-0 text-(--ga-color-icon-primary);
  }

  .ga-side-navigation__footer-dropdown-title {
    @apply text-md min-w-0 flex-1 truncate text-left font-medium text-(--ga-color-text-action);
  }
}