site/src/styles/ak-command.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
 */

@property --ak-command-depth-x {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --ak-command-depth-y {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@custom-variant ak-command-focus {
  &:focus-visible {
    @slot;
  }
}

@custom-variant ak-command-disabled {
  &:disabled,
  &[aria-disabled="true"] {
    @slot;
  }
}

@custom-variant ak-command-active {
  &:not(:disabled, [aria-disabled="true"], :has(button:active)):active {
    @slot;
  }
}

@custom-variant ak-command-hover {
  &:not(
      :disabled,
      [aria-disabled="true"],
      :has(button:hover),
      :has(*:hover > button)
    ):hover {
    @slot;
  }
}

@utility ak-command_idle {
  @apply not-[a]:cursor-default relative block;

  &:not(button) {
    @apply select-none;
  }

  /* Only apply cursor-pointer to submit buttons that are not disabled */
  &:where([type="submit"], form button:only-of-type, a &) {
    @variant not-ak-command-disabled {
      @apply cursor-pointer;
    }
  }
}

@utility ak-command_focus {
  --ak-command-focus: 1;
}

@utility ak-command_active {
  @apply origin-bottom;
  @apply scale-x-(--ak-command-scale-x) scale-y-(--ak-command-scale-y) origin-bottom;
  --ak-command-scale-x: min(100%, 98% + 2% * var(--ak-command-depth-x, 0));
  --ak-command-scale-y: min(100%, 96% + 4% * var(--ak-command-depth-y, 0));
}

@utility ak-command {
  @apply ak-command_idle;
  @apply ak-command-focus:ak-command_focus;
  @apply ak-command-active:ak-command_active;
}

@utility ak-command-depth-* {
  --ak-command-depth-x: calc(1 - clamp(0, --value(number, [number]) / 10, 1));
  --ak-command-depth-y: calc(1 - clamp(0, --value(number, [number]) / 10, 1));
}

@utility ak-command-depth-x-* {
  --ak-command-depth-x: calc(1 - clamp(0, --value(number, [number]) / 10, 1));
}

@utility ak-command-depth-y-* {
  --ak-command-depth-y: calc(1 - clamp(0, --value(number, [number]) / 10, 1));
}
