@use '../tokens' as t;

.zone {
  @include t.column(t.space(2), center);
  @include t.transition(background-color, border-color);
  position: relative;
  border: t.stroke(thick) dashed t.role('line');
  border-radius: t.radius(lg);
  background: t.role('surface');
  padding-block: t.space(8);
  padding-inline: t.space(6);
  text-align: center;
  cursor: pointer;

  // The hidden input keeps the focus, so the ring has to be drawn on the surface around it.
  &:focus-within {
    border-color: t.role('accent');
    outline: t.stroke(thick) solid t.role('accent');
    outline-offset: t.stroke(thick);
  }

  &[data-over='true'] {
    border-color: t.role('accent');
    border-style: solid;
    background: t.role('bg-soft');
  }

  // Dimmed directly: `@include t.disabled` appends `:disabled`, which a `<label>` carrying a data
  // flag can never be, so the rule it compiled to matched nothing (`disabled-dim.test.ts`).
  &[data-disabled='true'] {
    opacity: 0.55;
    background: t.role('bg-soft');
    cursor: not-allowed;
  }

  &:has([aria-invalid='true']) {
    border-color: t.role('danger');
  }
}

.label {
  color: t.role('fg-strong');
  font-weight: t.weight(medium);
}

.hint {
  color: t.role('fg-muted');
  font-size: t.text(sm);
}

// Hidden, never `display: none` — a display-none input is unfocusable, and the keyboard path
// through this control is the input itself.
.input {
  @include t.visually-hidden;
}

.progress {
  display: block;
  inline-size: 100%;
  block-size: 0.375rem;
  border-radius: t.radius(pill);
  background: t.role('bg-soft');
  overflow: hidden;
  // Bounds the layout pass the `.bar` transition below costs to this subtree. See the note there.
  contain: layout;
}

// The upload bar. `inline-size` is a LAYOUT-triggering property and a transition on one is not
// compositor-only, which is a real cost and a deliberate trade — the compositor-safe form is
// `transform: scaleX()`, and `transform-origin` has no logical keyword, so the bar would grow from
// the physical left edge and fill away from the reading edge under `dir="rtl"`. A progress bar that
// runs backwards in Arabic is a worse defect than a layout pass. `contain: layout` on the track is
// what bounds the cost instead: the invalidation stops at the track, so nothing outside it is
// re-laid-out per frame. `layout` alone and NOT `layout size` — `size` makes a box ignore its
// contents in both axes, and FileInput's track takes its inline size from its containing block.
//
// Inline-start, not `left`: the bar has to fill from the reading edge under `dir="rtl"` too.
.bar {
  display: block;
  block-size: 100%;
  inline-size: var(--file-progress, 0%);
  border-start-start-radius: t.radius(pill);
  border-end-start-radius: t.radius(pill);
  background: t.role('accent');
  @include t.transition(inline-size);
}