.file-field {
  --file-field-inset: var(--space-lg);
  --file-field-icon-size: var(--icon-size-lg);
  --file-field-badge-size: 3.25rem;

  position: relative;
  display: grid;
  justify-items: center;
  overflow: clip;
  isolation: isolate;
  padding: var(--file-field-inset);
  border-color: var(--color-outline);
  border-style: dashed;
  border-radius: var(--radius-lg);
  text-align: center;
}

.file-field__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-field__prompt,
.file-field__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  grid-area: 1 / 1;
  max-inline-size: 100%;
  transition: opacity var(--duration-enter) var(--easing-enter);
}

.file-field__status {
  opacity: 0;
  visibility: hidden;
}

.file-field[aria-busy="true"] .file-field__prompt {
  opacity: 0;
  visibility: hidden;
}

.file-field[aria-busy="true"] .file-field__status {
  opacity: 1;
  visibility: visible;
}

.file-field__badge {
  display: grid;
  place-items: center;
  inline-size: var(--file-field-badge-size);
  block-size: var(--file-field-badge-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  transition:
    color var(--duration-state) var(--easing-state),
    translate var(--duration-state) var(--easing-state);
}

.file-field__icon {
  --icon-size: var(--file-field-icon-size);
}

.file-field__title,
.file-field__name {
  max-inline-size: 100%;
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
}

.file-field__reading {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

@media (hover: hover) {
  .file-field:hover {
    border-color: var(--color-accent);
  }
}

.file-field:has(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-accent);
  outline-offset: var(--focus-ring-offset);
}

.file-field:has(:active) {
  translate: 0 var(--translate-recessed);
}

.file-field--over {
  border-color: var(--color-accent);
  border-style: solid;
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-md);
}

.file-field--over .file-field__badge {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  translate: 0 calc(-1 * var(--space-2xs));
}

.file-field[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
  animation: file-field-busy var(--duration-pulse) var(--easing-state) infinite;
}

@keyframes file-field-busy {
  50% {
    opacity: 0.5;
  }
}

@media (forced-colors: active) {
  .file-field__badge {
    border: var(--border-width) solid currentcolor;
  }

  .file-field--over {
    outline: var(--focus-ring-width) solid currentcolor;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
}