/* GENERATED by scripts/build/tailwind/build-tailwind.ts — edit frameworks/tailwind/Theme.css or a manifest, not this file. */
@import '../../../Prelude.generated.css';

@layer utilities {
  .arena-checkbox__root {
    display: inline-flex;
    min-height: var(--dz-ctl-h-sm);
    align-items: center;
    gap: calc(var(--sp-1) * 2.5);
  }
  .arena-checkbox__box {
    display: inline-flex;
    width: var(--sp-5);
    height: var(--sp-5);
    align-items: center;
    justify-content: center;
    border-radius: var(--r-control-sm);
    border-style: var(--tw-border-style);
    border-width: var(--bw-control);
    transition-property: background;
    transition-timing-function: var(--tw-ease, var(--ease-out));
    transition-duration: var(--tw-duration, var(--dur-fast));
    --tw-duration: var(--dur-hover);
    transition-duration: var(--dur-hover);
    --tw-ease: var(--ease-hover);
    transition-timing-function: var(--ease-hover);
    &:has(~input:focus-visible) {
      --tw-shadow: 0 0 0 var(--focus-width) var(--focus-ring);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .arena-checkbox__check {
    width: var(--sp-3);
    height: var(--sp-3);
    stroke-width: var(--bw-strong);
    color: var(--color-primary-content);
  }
  .arena-checkbox__label {
    font-family: var(--font-body);
    font-size: var(--dz-text);
    color: var(--ink-body);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-body) var(--level-ink-body), transparent);
    }
  }
  .arena-checkbox__input {
    position: absolute;
    width: 0px;
    height: 0px;
    opacity: 0%;
  }
  .arena-checkbox__box--checked-true {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
  .arena-checkbox__box--checked-false {
    border-color: var(--edge-control);
    background-color: var(--color-base-300);
  }
  .arena-checkbox__root--disabled-true {
    cursor: not-allowed;
    opacity: 50%;
  }
  .arena-checkbox__root--disabled-false {
    cursor: pointer;
  }
}