@layer components {
  .primary-nav {
    @apply ml-sai mt-sai mb-sai z-popover bg-surface border-line relative isolate hidden w-14 shrink-0 flex-col border-r border-solid pt-2 md:flex;
  }

  .primary-nav__nav-item {
    @apply text-content relative mx-auto my-1 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-all;
  }

  .primary-nav__nav-item:hover,
  .primary-nav__nav-item--active {
    @apply bg-surface-more rounded-2xl;
  }

  .primary-nav__nav-item::after {
    content: "";
    @apply absolute top-1/2 -left-1 h-0 w-1 -translate-y-1/2 rounded-r;
    background-color: var(--content);
    transition: height 150ms ease;
  }

  .primary-nav__nav-item:hover::after {
    @apply h-5;
  }

  .primary-nav__nav-item--active::after {
    @apply h-10;
  }
}

[data-fl-theme="clay"] .primary-nav {
  .primary-nav__nav-item:hover {
    background-color: color-mix(in srgb, var(--primary) 30%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }

  .primary-nav__nav-item--active {
    background-color: var(--primary);
    color: var(--primary-content);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
  }

  .primary-nav__nav-item:active {
    background-color: color-mix(in srgb, var(--primary) 50%, transparent);
    transform: translateY(1px);
    box-shadow: none;
  }
}