/* Campo de formulário (Atlassian Text field / Select / Textarea) com rótulo, ajuda e erro.
   <c-campo :campo="form.nome" />. Os controles nativos têm a mesma cara em qualquer tela,
   porque os formulários do Django os geram sem classe. */

.ds-campo { display: grid; gap: var(--espaco-050); align-content: start; }
.ds-campo__rotulo { font: var(--fonte-texto-p); font-weight: var(--peso-seminegrito); color: var(--cor-texto-suave); }
.ds-campo__obrigatorio { color: var(--cor-perigo-texto); margin-left: var(--espaco-025); }
.ds-campo__ajuda { font: var(--fonte-texto-p); color: var(--cor-texto-sutil); }
.ds-campo__erro { display: flex; gap: var(--espaco-050); align-items: center; font: var(--fonte-texto-p); color: var(--cor-perigo-texto); }
.ds-campo--marcacao { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--espaco-100); }
.ds-campo--marcacao .ds-campo__rotulo { font: var(--fonte-texto); color: var(--cor-texto); }
.ds-campo--marcacao .ds-campo__ajuda, .ds-campo--marcacao .ds-campo__erro { grid-column: 2; }

input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="color"], [type="range"]),
select,
textarea {
  font: var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--ds-background-input);
  border: var(--borda-largura) solid var(--cor-borda-campo);
  border-radius: var(--raio-medio);
  padding: var(--espaco-075) var(--espaco-100);
  min-height: 2.25rem;
  max-width: 100%;
}
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="color"], [type="range"]):hover,
select:hover,
textarea:hover { background: var(--ds-background-input-hovered); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-foco);
  box-shadow: inset 0 0 0 1px var(--cor-foco);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--cor-desabilitado-fundo);
  color: var(--cor-texto-desabilitado);
  cursor: not-allowed;
}
.ds-campo--erro input, .ds-campo--erro select, .ds-campo--erro textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--cor-perigo-borda);
}
textarea { min-height: 5rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--cor-primaria); }
input[type="file"] { font: var(--fonte-texto); color: var(--cor-texto-suave); }
input[type="file"]::file-selector-button {
  font: var(--fonte-texto);
  font-weight: var(--peso-medio);
  height: var(--altura-controle);
  padding: 0 var(--espaco-150);
  margin-right: var(--espaco-100);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  cursor: pointer;
}

/* Lista do select com a mesma cara dos campos (Atlassian Select). Onde o navegador ainda não
   deixa estilizar a lista aberta, fica a lista padrão dele. */
@supports (appearance: base-select) {
  select:not([multiple]),
  select:not([multiple])::picker(select) { appearance: base-select; }

  select:not([multiple]) {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-100);
    cursor: pointer;
  }
  select:not([multiple])::picker-icon {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.2rem;
    border-right: 2px solid var(--cor-texto-suave);
    border-bottom: 2px solid var(--cor-texto-suave);
    rotate: 45deg;
    transition: rotate 0.15s ease, margin 0.15s ease;
  }
  select:not([multiple]):open::picker-icon { rotate: 225deg; margin-top: 0.25rem; }

  select:not([multiple])::picker(select) {
    margin-top: var(--espaco-050);
    padding: var(--espaco-050) 0;
    max-height: 20rem;
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-medio);
    background: var(--cor-sobreposicao);
    box-shadow: var(--sombra-sobreposta);
  }
  select:not([multiple]) option {
    padding: var(--espaco-100) var(--espaco-150);
    font: var(--fonte-texto);
    color: var(--cor-texto);
    border-left: var(--borda-largura-foco) solid transparent;
    cursor: pointer;
  }
  select:not([multiple]) option::checkmark { display: none; }
  select:not([multiple]) option:hover,
  select:not([multiple]) option:focus-visible { background: var(--cor-bloco); outline: none; }
  select:not([multiple]) option:checked {
    background: var(--cor-selecionado-fundo);
    color: var(--cor-selecionado-texto);
    border-left-color: var(--cor-selecionado-texto);
  }
  select:not([multiple]) option:disabled { color: var(--cor-texto-desabilitado); cursor: not-allowed; }
}