.ga-menu {
  @apply text-md shadow-north flex max-h-81 max-w-[80ch] flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary);

  .ga-menu__item {
    @apply animate-hover relative flex min-h-9 shrink-0 cursor-pointer flex-row gap-2 px-3 py-2 text-left leading-none transition-colors;

    &:first-child {
      @apply rounded-t;
    }

    &:last-child {
      @apply rounded-b;
    }

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

      .ga-menu__item-icon {
        @apply text-(--ga-color-icon-action);
      }

      .ga-menu__item-label {
        @apply text-(--ga-color-text-action-hover);
      }
    }

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

    &.ga-menu__item--disabled {
      @apply cursor-not-allowed bg-(--ga-color-surface-primary);

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

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

    &.ga-menu__item--selected {
      @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);

      .ga-menu__item-icon {
        @apply text-(--ga-color-icon-on-action);
      }

      .ga-menu__item-label {
        @apply text-(--ga-color-text-on-action);
      }

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

      &.ga-menu__item--disabled {
        @apply bg-(--ga-color-surface-primary);

        .ga-menu__item-icon {
          @apply text-(--ga-color-icon-on-disabled);
        }

        .ga-menu__item-label {
          @apply text-(--ga-color-text-disable-selected);
        }
      }
    }
  }

  &:not(:focus-within) .ga-menu__item.ga-menu__item--active,
  .ga-menu__item:focus-visible {
    &::after {
      @apply absolute top-[1px] left-[1px] h-[calc(100%-2px)] w-[calc(100%-2px)] rounded border-2 border-(--ga-color-border-focus) content-[''];
    }

    &.ga-menu__item--selected {
      &::after {
        @apply border-(--ga-color-white);
      }
    }
  }

  .ga-menu__item-icon {
    @apply mt-0.5 shrink-0 text-(--ga-color-icon-primary);
  }

  .ga-menu__item-content {
    @apply flex min-w-0 flex-col;
  }

  .ga-menu__item-title {
    @apply flex items-center gap-2;
  }

  .ga-menu__item-label {
    @apply text-md h-5 flex-1 truncate font-medium text-(--ga-color-text-action);
  }

  .ga-menu__item-shortcut {
    @apply shrink-0 rounded border border-(--ga-color-border-disabled) bg-white px-1 text-xs font-medium text-(--ga-color-text-body);
  }

  .ga-menu__item-description {
    @apply text-xs text-(--ga-color-text-disable-selected);
  }

  .ga-menu__separator {
    @apply ml-3 border-b border-(--ga-color-border-primary);
  }

  .ga-menu__title {
    @apply px-3 pt-3 pb-2 text-sm font-semibold;
  }
}