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

@layer utilities {
  .arena-file-input__root {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--sp-1) * 1.5);
  }
  .arena-file-input__label {
    font-family: var(--ff-label);
    font-size: var(--dz-text-xs);
    --tw-tracking: var(--track-label);
    letter-spacing: var(--track-label);
    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);
    }
    text-transform: var(--tt-label);
  }
  .arena-file-input__required {
    margin-left: var(--sp-1);
    color: var(--color-primary);
  }
  .arena-file-input__required-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .arena-file-input__zone {
    position: relative;
    display: grid;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-inline);
    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);
  }
  .arena-file-input__trigger {
    grid-column-start: 1;
    grid-row-start: 1;
    display: inline-flex;
    height: var(--arena-size-control-h,var(--size-md-control-h));
    width: fit-content;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: var(--gap-control);
    border-radius: var(--r-control);
    border-style: var(--tw-border-style);
    border-width: var(--bw-control);
    border-color: var(--arena-emphasis-edge,var(--emphasis-secondary-edge));
    background-color: var(--arena-emphasis-fill,var(--emphasis-secondary-fill));
    padding-inline: var(--arena-size-control-pad-x,var(--size-md-control-pad-x));
    font-family: var(--font-body);
    font-size: var(--arena-size-control-step,var(--size-md-control-step));
    --tw-font-weight: var(--fw-control);
    font-weight: var(--fw-control);
    --tw-tracking: var(--ls-normal);
    letter-spacing: var(--ls-normal);
    color: var(--arena-emphasis-ink,var(--emphasis-secondary-ink));
    --tw-shadow: var(--shadow-control-rest);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    transition: background var(--dur-hover) var(--ease-hover),translate var(--dur-hover) var(--ease-hover),scale var(--dur-hover) var(--ease-hover),box-shadow var(--dur-state) var(--ease-state);
    &:focus-visible {
      --tw-shadow: inset 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);
    }
    &:active {
      scale: var(--press-scale);
    }
    &:disabled {
      cursor: not-allowed;
    }
    @media (prefers-reduced-motion: reduce) {
      &:active {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .arena-file-input__icon {
    display: inline-flex;
    font-size: var(--icon-md);
  }
  .arena-file-input__prompt {
    grid-column-start: 2;
    grid-row-start: 1;
    min-width: 0px;
    font-family: var(--font-body);
    font-size: var(--dz-text-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-file-input__files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-inline);
  }
  .arena-file-input__file {
    display: inline-flex;
    max-width: 100%;
    min-width: 0px;
    align-items: center;
    gap: var(--gap-inline);
  }
  .arena-file-input__size {
    font-family: var(--font-mono);
    font-size: var(--dz-text-xs);
    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);
    }
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .arena-file-input__rejected {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inline);
  }
  .arena-file-input__rejection {
    font-family: var(--font-body);
    font-size: var(--dz-text-sm);
    color: var(--arena-hue-ink);
  }
  .arena-file-input__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .arena-file-input__input {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    width: 100%;
    height: 100%;
    opacity: 0%;
  }
  .arena-file-input__hint {
    font-family: var(--font-body);
    font-size: var(--dz-text-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-file-input__error {
    font-family: var(--font-body);
    font-size: var(--dz-text-sm);
    color: var(--arena-hue-ink);
  }
  .arena-file-input__zone:where([data-arena-droppable]) {
    border-radius: var(--r-surface);
    border-style: var(--tw-border-style);
    border-width: var(--bw-surface);
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--edge-surface);
    background-color: var(--fill-surface);
    padding: var(--pad-surface);
    --tw-shadow: var(--shadow-surface-rest);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .arena-file-input__zone:where([data-arena-dragging]) {
    background-color: var(--fill-hover);
  }
  .arena-file-input__zone:where([data-arena-state="error"]) {
    border-color: var(--arena-hue-edge);
  }
  .arena-file-input__root:where([data-arena-disabled]) {
    opacity: 50%;
  }
  @media (hover: hover) {
    .arena-file-input__trigger:where(:not([data-arena-disabled])):hover {
          --tw-translate-y: calc(var(--lift-control) * -1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
          background-color: var(--arena-emphasis-fill-hover,var(--emphasis-secondary-fill-hover));
          --tw-shadow: var(--arena-emphasis-shadow-hover,var(--shadow-control-rest));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
  }
  .arena-file-input__trigger:where(:not([data-arena-disabled])):focus-visible {
    --tw-shadow: inset 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);
  }
}