site/src/styles/ak-nav.css
/**
 * Copyright 2025-present Ariakit FZ-LLC. All Rights Reserved.
 *
 * This software is proprietary. See the license.md file in the root of this
 * package for licensing terms.
 *
 * SPDX-License-Identifier: UNLICENSED
 */

@custom-variant ak-nav-current {
  &:where([aria-current="true"], [aria-current="page"]) {
    @slot;
  }
}

@utility ak-nav-icon-* {
  --ak-nav-icon-size: --spacing(--value(number));
  --ak-nav-icon-size: --value(--spacing, [*]);
}

@utility ak-nav-gap-* {
  --ak-nav-gap: --spacing(--value(number));
  --ak-nav-gap: --value(--spacing, [*]);
}

@utility ak-nav {
  @apply ak-nav-gap-1;
  :where(> ul) {
    @apply ak-nav-list;
  }
}

@utility ak-nav-list {
  @apply grid;
}

@utility ak-nav-group {
  @apply grid;
}

/* ak-nav-icon */
@utility ak-nav-icon {
  @apply h-(--ak-button-leading) w-(--ak-nav-icon-size) flex-none self-start transition-[height];
  svg {
    @apply size-full;
  }
  @variant ak-sidebar-collapsed {
    @apply size-(--ak-nav-icon-size);
  }
}

@utility ak-nav-link_idle {
  @apply ak-button_idle ak-dark:ak-text/70;
  @apply z-1 relative justify-start text-wrap;
  --ak-button-padding-block: calc(
    var(--ak-disclosure-padding, var(--ak-frame-padding)) -
      (var(--ak-button-leading) - 1em) / 2 + var(--ak-nav-gap)
  );
  padding-block: var(--ak-button-padding-block);
  @variant not-ak-nav-current {
    @apply font-normal;
  }
}

@utility ak-nav-link-overlay {
  && {
    @apply bg-transparent;
  }
  &::before {
    @apply -z-1 ak-layer-(--ak-layer) absolute inset-x-0 rounded-[inherit];
    content: "";
    inset-block: calc(var(--ak-nav-gap) * 0.5);
  }
}

@utility ak-nav-link_hover {
  @apply ak-button_hover ak-nav-link-overlay;
}

@utility ak-nav-link_focus {
  @apply ak-button_focus;
}

@utility ak-nav-link_active {
  @apply ak-button_active;
}

@utility ak-nav-link_disabled {
  @apply ak-button_disabled;
}

@utility ak-nav-link_current {
  @apply ak-layer-pop ak-nav-link-overlay;
  @apply z-1;
  &::before {
    @apply ak-edge/0;
    @apply ring ring-inset;
  }
}

@utility ak-nav-link {
  @apply ak-nav-link_idle;
  @apply ak-command-hover:not-ak-nav-current:ak-nav-link_hover;
  @apply ak-command-focus:ak-nav-link_focus;
  @apply ak-command-active:ak-nav-link_active;
  @apply ak-command-disabled:ak-nav-link_disabled;
  @apply ak-nav-current:ak-nav-link_current;
}

@utility ak-nav-button_idle {
  @apply ak-button_idle ak-frame-force-(--ak-disclosure-radius,theme(--radius-field))/(--ak-disclosure-padding,--spacing(2));
  @apply transition-discrete justify-start overflow-clip whitespace-normal text-start transition-[gap,width,height,padding] delay-0;
  interpolate-size: allow-keywords;
  transition-duration: var(--ak-sidebar-duration);
  gap: calc(0.75em + 1px);

  @variant ak-sidebar-collapsed {
    @apply size-(--ak-nav-button-size) gap-0 after:opacity-0;
    --ak-nav-button-size: calc(var(--ak-sidebar-min-width) - --spacing(2));
    padding: calc(
      (
          var(--ak-nav-button-size) -
            var(--ak-nav-icon-size, var(--ak-disclosure-icon-size))
        ) *
        0.5
    );
  }
}

@utility ak-nav-button_hover {
  @apply ak-button_hover;
}

@utility ak-nav-button_focus {
  @apply ak-button_focus;
}

@utility ak-nav-button_active {
  @apply ak-button_active;
}

@utility ak-nav-button_disabled {
  @apply ak-button_disabled;
}

@utility ak-nav-button {
  @apply ak-nav-button_idle;
  @apply ak-command-hover:ak-nav-button_hover;
  @apply ak-command-focus:ak-nav-button_focus;
  @apply ak-command-active:ak-nav-button_active;
  @apply ak-command-disabled:ak-nav-button_disabled;
}

@utility ak-nav-button-content {
  @apply block overflow-hidden transition-[translate,height,opacity];
  transition-behavior: allow-discrete;
  interpolate-size: allow-keywords;
  transition-duration: var(--ak-sidebar-duration);
  transition-delay: 0ms, calc(var(--ak-sidebar-duration)), 0ms;
  @variant ak-sidebar-collapsed {
    @apply h-(--ak-button-leading) opacity-0 delay-0;
    transition-duration:
      var(--ak-sidebar-duration), 0ms, var(--ak-sidebar-duration);
  }
}

@utility ak-nav-disclosure {
  @apply ak-disclosure ak-disclosure-split ak-frame-field/2;
  @container style(--ak-nav-icon-size) {
    @apply ak-disclosure-icon-(--ak-nav-icon-size);
  }
}

@utility ak-nav-disclosure-button {
  @apply ak-nav-button;
  @layer base {
    @apply ak-disclosure-button;
  }
}

@utility ak-nav-disclosure-content {
  @apply ak-disclosure-content;
  :where(& > *) {
    @apply ak-nav-disclosure-content-body;
  }
  @variant ak-sidebar-collapsed {
    @apply h-0 w-0;
  }
  @container style(--ak-disclosure-icon-size) {
    --ak-disclosure-ps: calc(
      var(--ak-disclosure-icon-size) + var(--ak-disclosure-padding) + 1px
    );
  }
}

@utility ak-nav-disclosure-content-body {
  @apply ak-disclosure-content-body;
  @apply ak-frame-force-(--ak-nav-disclosure-content-body-radius)/(--ak-nav-disclosure-content-body-padding);
  --ak-nav-disclosure-content-body-padding: calc(var(--ak-nav-gap) * 0.5);
  --ak-nav-disclosure-content-body-radius: calc(
    var(--ak-disclosure-radius) + var(--ak-nav-disclosure-content-body-padding)
  );
  padding-inline-start: var(--ak-disclosure-ps);
}
