@layer components {
  .upload-row {
    --icon-size: var(--input-icon-size);

    display: grid;
    grid-template-columns: var(--row-icon-size) minmax(var(--space-0), var(--track-fill)) auto;
    grid-template-areas: "icon text actions" "icon progress actions";
    align-items: center;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-4);
  }

  .upload-row--row + .upload-row--row {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .upload-row__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    inline-size: var(--row-icon-size);
    block-size: var(--row-icon-size);
    border-radius: var(--radius-sm);
    background-color: var(--color-chip);
    color: var(--color-ink-muted);
  }

  .upload-row__icon > .icon,
  .upload-row__state {
    display: none;
  }

  .upload-row[data-state="uploading"] :is(.icon--arrow-up-tray, .upload-row__state--uploading),
  .upload-row[data-state="done"] :is(.icon--check, .upload-row__state--done),
  .upload-row:is([data-state="failed"], [data-state="refused"]) :is(.icon--x-mark, .upload-row__state--failed) {
    display: revert;
  }

  .upload-row[data-state="done"] .upload-row__icon {
    background-color: var(--color-done-soft);
    color: var(--color-done);
  }

  .upload-row:is([data-state="failed"], [data-state="refused"]) .upload-row__icon {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .upload-row__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: var(--space-0);
  }

  .upload-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-body);
    color: var(--color-ink);
  }

  .upload-row__state {
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .upload-row__state--failed {
    color: var(--color-danger);
  }

  .upload-row__actions {
    grid-area: actions;
    display: none;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .upload-row:is([data-state="failed"], [data-state="refused"]) .upload-row__actions {
    display: flex;
  }

  .upload-row:not([data-state="failed"]) .upload-row__retry {
    display: none;
  }

  .upload-row__progress {
    grid-area: progress;
    inline-size: var(--size-fill);
    block-size: var(--space-2);
    overflow: hidden;
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--color-chip);
    appearance: none;
  }

  .upload-row__progress::-webkit-progress-bar {
    background-color: var(--color-chip);
  }

  .upload-row__progress::-webkit-progress-value {
    background-color: var(--color-accent);
    transition: inline-size var(--dur-base) var(--ease-calm);
  }

  .upload-row__progress::-moz-progress-bar {
    background-color: var(--color-accent);
  }

  .upload-row:not([data-state="uploading"]) .upload-row__progress {
    display: none;
  }

  .upload-row--tile {
    grid-template-columns: minmax(var(--space-0), var(--track-fill));
    grid-template-areas: "icon" "progress" "text" "actions";
    align-content: start;
    gap: var(--space-3);
    padding-block: var(--space-0);
  }

  .upload-row--tile .upload-row__icon {
    --icon-size: var(--button-icon-size-large);

    inline-size: var(--size-fill);
    block-size: var(--tile-size);
    background-color: var(--color-surface-sunken);
  }

  .upload-row--tile .upload-row__actions {
    grid-area: icon;
    position: relative;
    block-size: var(--tile-size);
  }

  .upload-row--tile .upload-row__retry {
    --icon-size: var(--button-icon-size-large);

    position: absolute;
    inset: var(--space-0);
    inline-size: auto;
    block-size: auto;
    border: none;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--color-danger);
  }

  .upload-row--tile[data-state="failed"] .upload-row__icon > .icon--x-mark {
    display: none;
  }

  .upload-row--tile .upload-row__remove {
    --button-size: var(--space-9);
    --icon-size: var(--space-6);

    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    border-color: var(--color-border);
    background-color: var(--color-surface);
    box-shadow: var(--elev-1);
  }

  .upload-row--tile .upload-row__remove::before {
    content: "";
    position: absolute;
    inset: calc((var(--space-9) - var(--tap-min)) / 2);
  }
}