/*
 * Overlay reversível para o painel de upload publicado.
 * Carregar depois do bundle gerado pelo Vite.
 *
 * O primeiro div direto é o bloco que contém strong/span do arquivo. O label
 * direto é o seletor de tipo. Assim o overlay também funciona no bundle que
 * ainda não contém a classe de origem `upload-copy`.
 */
@media (min-width: 641px) and (max-width: 1200px) {
  .upload-panel {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "upload-icon upload-copy upload-copy upload-copy upload-copy upload-copy"
      "upload-type upload-type upload-type upload-type upload-type upload-type"
      "upload-camera upload-camera upload-select upload-select upload-submit upload-submit";
  }

  .upload-panel > svg {
    grid-area: upload-icon;
  }

  .upload-panel > div:first-of-type {
    grid-area: upload-copy;
    min-width: 0;
  }

  .upload-panel > .score-type-control {
    grid-area: upload-type;
    max-width: 320px;
    min-width: 0;
  }

  .upload-panel > button:nth-of-type(1) {
    grid-area: upload-camera;
  }

  .upload-panel > button:nth-of-type(2) {
    grid-area: upload-select;
  }

  .upload-panel > button:nth-of-type(3) {
    grid-area: upload-submit;
  }

  .upload-panel > button {
    width: 100%;
    min-width: 0;
  }

  .upload-panel .upload-progress,
  .upload-panel .error-text,
  .upload-panel .upload-result {
    grid-column: 1 / -1;
  }
}