/* 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-switch__root {
    display: inline-flex;
    min-height: var(--dz-ctl-h-sm);
    align-items: center;
    gap: calc(var(--sp-1) * 2.5);
  }
  .arena-switch__track {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--r-pill);
    --tw-border-style: none;
    border-style: none;
    padding: calc(var(--sp-1) * 0.5);
    transition-property: background;
    transition-timing-function: var(--tw-ease, var(--ease-out));
    transition-duration: var(--tw-duration, var(--dur-fast));
    --tw-duration: var(--dur-state);
    transition-duration: var(--dur-state);
    --tw-ease: var(--ease-state);
    transition-timing-function: var(--ease-state);
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
    &::after {
      content: var(--tw-content);
      top: calc(1 / 2 * 100%);
    }
    &::after {
      content: var(--tw-content);
      left: calc(1 / 2 * 100%);
    }
    &::after {
      content: var(--tw-content);
      height: var(--dz-ctl-h-sm);
    }
    &::after {
      content: var(--tw-content);
      width: 100%;
    }
    &::after {
      content: var(--tw-content);
      min-width: var(--dz-ctl-h-sm);
    }
    &::after {
      content: var(--tw-content);
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &::after {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &::after {
      content: var(--tw-content);
      --tw-content: '';
      content: var(--tw-content);
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
  .arena-switch__knob {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background-color: var(--color-primary-content);
    transition-property: translate;
    transition-timing-function: var(--tw-ease, var(--ease-out));
    transition-duration: var(--tw-duration, var(--dur-fast));
    --tw-duration: var(--dur-state);
    transition-duration: var(--dur-state);
    --tw-ease: var(--ease-state);
    transition-timing-function: var(--ease-state);
    @media (prefers-reduced-motion: reduce) {
      transition-property: none;
    }
  }
  .arena-switch__icon {
    color: var(--color-primary);
  }
  .arena-switch__label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--sp-1) * 1.5);
    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-switch__guard {
    font-size: var(--icon-sm);
    color: var(--ink-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-muted) var(--level-ink-muted), transparent);
    }
  }
  .arena-switch__knob--size-sm {
    width: calc(var(--sp-1) * 3.5);
    height: calc(var(--sp-1) * 3.5);
  }
  .arena-switch__icon--size-sm {
    font-size: calc(var(--sp-1) * 2.25);
  }
  .arena-switch__knob--size-md {
    width: calc(var(--sp-1) * 4.5);
    height: calc(var(--sp-1) * 4.5);
  }
  .arena-switch__icon--size-md {
    font-size: calc(var(--sp-1) * 2.75);
  }
  .arena-switch__knob--size-lg {
    width: calc(var(--sp-1) * 5.5);
    height: calc(var(--sp-1) * 5.5);
  }
  .arena-switch__icon--size-lg {
    font-size: calc(var(--sp-1) * 3.25);
  }
  .arena-switch__knob--size-xl {
    width: calc(var(--sp-1) * 6.5);
    height: calc(var(--sp-1) * 6.5);
  }
  .arena-switch__icon--size-xl {
    font-size: calc(var(--sp-1) * 3.75);
  }
  .arena-switch__knob--size-2xl {
    width: calc(var(--sp-1) * 7.5);
    height: calc(var(--sp-1) * 7.5);
  }
  .arena-switch__icon--size-2xl {
    font-size: calc(var(--sp-1) * 4.25);
  }
  .arena-switch__track--orientation-horizontal {
    flex-direction: row;
  }
  .arena-switch__track--orientation-vertical {
    flex-direction: column;
  }
  .arena-switch__track--checked-true {
    background-color: var(--color-primary);
  }
  .arena-switch__track--checked-false {
    background-color: var(--color-neutral);
  }
  .arena-switch__root--disabled-true {
    opacity: 50%;
  }
  .arena-switch__track--footprint-horizontal-sm {
    height: calc(var(--sp-1) * 4.5);
    width: var(--sp-8);
  }
  .arena-switch__track--footprint-horizontal-md {
    height: calc(var(--sp-1) * 5.5);
    width: var(--sp-10);
  }
  .arena-switch__track--footprint-horizontal-lg {
    height: calc(var(--sp-1) * 6.5);
    width: var(--sp-12);
  }
  .arena-switch__track--footprint-horizontal-xl {
    height: calc(var(--sp-1) * 7.5);
    width: calc(var(--sp-1) * 14);
  }
  .arena-switch__track--footprint-horizontal-2xl {
    height: calc(var(--sp-1) * 8.5);
    width: var(--sp-16);
  }
  .arena-switch__track--footprint-vertical-sm {
    height: var(--sp-8);
    width: calc(var(--sp-1) * 4.5);
  }
  .arena-switch__track--footprint-vertical-md {
    height: var(--sp-10);
    width: calc(var(--sp-1) * 5.5);
  }
  .arena-switch__track--footprint-vertical-lg {
    height: var(--sp-12);
    width: calc(var(--sp-1) * 6.5);
  }
  .arena-switch__track--footprint-vertical-xl {
    height: calc(var(--sp-1) * 14);
    width: calc(var(--sp-1) * 7.5);
  }
  .arena-switch__track--footprint-vertical-2xl {
    height: var(--sp-16);
    width: calc(var(--sp-1) * 8.5);
  }
  .arena-switch__knob--thumb-off-horizontal {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .arena-switch__knob--thumb-on-horizontal {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .arena-switch__knob--thumb-off-vertical {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .arena-switch__knob--thumb-on-vertical {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}