site/src/styles/ak-checkbox.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-checkbox-checked {
  &:has(*:checked, [aria-checked="true"]) {
    @slot;
  }
  @container style(--ak-checkbox-checked: 1) {
    @slot;
  }
}

@custom-variant ak-checkbox-disabled {
  &:has(*:disabled, [aria-disabled="true"]) {
    @slot;
  }
  @container style(--ak-checkbox-disabled: 1) {
    @slot;
  }
}

@custom-variant ak-checkbox-round {
  @container style(--ak-checkbox-round: 1) {
    @slot;
  }
}

@custom-variant ak-checkbox-vertical {
  @container style(--ak-checkbox-vertical: 1) {
    @slot;
  }
}

@utility ak-checkbox-card-grid {
  @apply grid auto-rows-fr gap-3;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--ak-checkbox-min-w, 10rem), 1fr)
  );
}

@utility ak-checkbox-card-grid-min-w-* {
  --ak-checkbox-min-w: --spacing(--value(number));
  --ak-checkbox-min-w: --value(--spacing, [length]);
}

@utility ak-checkbox-card_idle {
  @apply ak-button_idle ak-layer ak-frame-card ak-bordering;
  @apply outline-offset-3 flex flex-wrap content-start justify-start text-wrap;

  --ak-checkbox-card-edge: var(--ak-layer-border);
  gap: calc(var(--ak-frame-padding) / 2) calc(var(--ak-frame-padding) * 0.75);

  input[type="checkbox"] {
    @apply sr-only absolute;
  }

  &:has(> *:nth-child(4), > div > div) {
    @apply ak-command-depth-4;
  }
}

@utility ak-checkbox-card_hover {
  @apply ak-button_hover;
}

@utility ak-checkbox-card_focus {
  @apply ak-button_focus;
}

@utility ak-checkbox-card_active {
  @apply ak-button_active;
}

@utility ak-checkbox-card_disabled {
  --ak-checkbox-disabled: 1;
  && {
    @apply ak-edge/5 ak-layer-mix/20 ak-text/0;
  }
  svg,
  img {
    @apply opacity-50;
  }
}

@utility ak-checkbox-card_checked {
  @apply not-has-disabled:not-has-aria-disabled:ak-edge-contrast-primary;
  --ak-checkbox-checked: 1;
}

@utility ak-checkbox-card {
  @apply ak-checkbox-card_idle;
  @apply hover:not-has-disabled:not-has-aria-disabled:ak-checkbox-card_hover;
  @apply has-focus-visible:ak-checkbox-card_focus;
  @apply has-active:not-has-disabled:not-has-aria-disabled:ak-checkbox-card_active;
  @apply ak-checkbox-checked:ak-checkbox-card_checked;
  @apply ak-checkbox-disabled:ak-checkbox-card_disabled;
}

@utility ak-checkbox-card-vertical {
  @apply grid justify-stretch;
  --ak-checkbox-vertical: 1;
}

@utility ak-checkbox-card-round {
  @apply ak-frame-full/2;
  --ak-checkbox-round: 1;
}

@utility ak-checkbox-card-label {
  @apply me-auto flex-1 self-start truncate;
  width: calc-size(auto, size + --spacing(4));
  @variant ak-checkbox-round {
    @apply text-center;
  }
  @variant ak-checkbox-vertical {
    @apply w-full text-center;
  }
}

@utility ak-checkbox-card-check_idle {
  @apply ak-layer-down ak-frame-force-full/1 ak-bordering;
  @apply size-6 flex-none self-start *:hidden;
  @variant ak-checkbox-vertical {
    @apply justify-self-end;
    grid-column: 1;
    grid-row: 1;
  }
}

@utility ak-checkbox-card-check_checked {
  @apply ak-layer-(--ak-checkbox-card-edge) empty:before:ak-icon-check;
  @apply ring-(--ak-layer) border-0 ring *:block;
}

@utility ak-checkbox-card-check_disabled {
  @apply ak-layer-(--ak-layer-parent) ak-text/0 ak-edge/10;
}

@utility ak-checkbox-card-check {
  @apply ak-checkbox-card-check_idle;
  @variant ak-checkbox-checked {
    @apply ak-checkbox-card-check_checked;
  }
  @variant ak-checkbox-disabled {
    @apply ak-checkbox-card-check_disabled;
  }
}

@utility ak-checkbox-card-image {
  @apply ak-frame/2 flex h-full w-20 items-center justify-center;
  @variant ak-checkbox-vertical {
    @apply max-w-4/5 w-full justify-self-center;
    grid-column: 1;
    grid-row: 1;
  }
}

@utility ak-checkbox-card-description {
  @apply ak-text/70;
  @apply w-full self-start font-normal;
  @variant ak-checkbox-disabled {
    @apply ak-text/0;
  }
}

@utility ak-checkbox-card-content {
  @apply flex flex-1 flex-wrap content-start gap-[inherit] self-start;
}
