@use "../variables" as *;
// Retro File Upload
.retro-file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  background: var(--retro-input-bg);
  border: 2px dashed var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  padding: 16px;
  box-shadow: 1px 1px 0 var(--retro-border-light);
  min-width: 260px;
}
.retro-file-label {
  cursor: pointer;
  margin-bottom: 0;
}

// The <input type="file"> is visually hidden with .retro-sr-only so it stays
// focusable -- .retro-hidden is `display: none`, which took it out of the tab
// order entirely and left no keyboard route to the file picker at all. Because
// the input is clipped, its focus ring is invisible, so the label wears it.
// Matches the retro-focus-ring mixin's values; the mixin itself styles the
// focused element, and here the ring has to move to a sibling.
.retro-file-input:focus-visible + .retro-file-label {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}
.retro-file-filename {
  font-size: var(--retro-font-size);
  color: var(--retro-input-text);
  margin-inline-start: 8px;
}
.retro-file-drop {
  width: 100%;
  padding: 16px;
  text-align: center;
  background: var(--retro-input-bg);
  border: 1px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  color: var(--retro-text-muted);
  font-size: var(--retro-font-size-lg);
  margin-top: 8px;
  transition: background 0.2s, border 0.2s;
}
.retro-file-drop.dragover {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  border-color: var(--retro-primary);
}