@layer components {
  .secondary-nav {
    @apply border-line mt-sai mb-sai bg-surface-more z-nav max-h-screen min-h-0 w-60 shrink-0 flex-col gap-1 border-r border-solid;

    .secondary-nav__nav-item:hover {
      @apply bg-surface-less text-content;
    }

    .secondary-nav__nav-item--active {
      @apply bg-primary text-primary-content;

      &:hover {
        @apply bg-primary-bold text-primary-content;
      }
    }
  }
}

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

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

    &:hover {
      color: var(--content);
    }
  }

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