/* -------------------------------------------------------------------------------------------
   Los nueve controles de formulario.

   Hoja aparte y no dentro de dameti-components.css porque estos controles vienen del bloque
   antiguo del framework y su marcado no sigue el mismo patron BEM que el resto: se separan para
   que se vea de un vistazo lo que queda por unificar.

   Antes de esto, los nueve emitian clases de Bootstrap —form-control, help-block, p-2, my-2,
   mx-0, mb-0, pt-1— y de Bootstrap Icons —bi bi-record-fill—, y NINGUNA estaba definida en
   ninguna hoja del proyecto. Un tercio del framework no se veia bien salvo que la aplicacion
   cargara Bootstrap por su cuenta, y eso no lo decia el README, no lo declaraba el .csproj y no
   lo sabia nadie hasta montarlo.

   Todo sale de las variables de dameti.css: una aplicacion cambia el tema entero sin tocar
   esto.
   ------------------------------------------------------------------------------------------- */

.input__label {
    display: block;
    margin: var(--dm-space-2) 0 var(--dm-space-1) 0;
    font-size: var(--dm-text-sm);
    font-weight: 600;
    color: var(--dm-text);
}

.input__color-code {
    font-family: var(--dm-font-mono);
    font-weight: 400;
    color: var(--dm-text-muted);
}

.input__required {
    margin-left: 2px;
    color: var(--dm-danger);
}

.input__control {
    display: block;
    width: 100%;
    padding: var(--dm-space-2);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    background-color: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
}

.input__control:focus {
    outline: 2px solid var(--dm-primary);
    outline-offset: -1px;
}

.input__control:disabled {
    background-color: var(--dm-surface-alt);
    color: var(--dm-text-muted);
    cursor: not-allowed;
}

.input__control[readonly] {
    background-color: var(--dm-surface-alt);
}

.input__control--color {
    font-family: var(--dm-font-mono);
}

.input__control--area {
    min-height: 4rem;
    resize: vertical;
}

.input__control--invalid {
    border-color: var(--dm-danger);
}

.input__help {
    display: block;
    margin-top: var(--dm-space-1);
    font-size: var(--dm-text-sm);
    color: var(--dm-text-soft);
}

.input__error {
    display: block;
    margin-top: var(--dm-space-1);
    font-size: var(--dm-text-sm);
    color: var(--dm-danger);
}

.input__display {
    display: block;
    width: 100%;
    padding: var(--dm-space-2);
    min-height: 2.5rem;
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    background-color: var(--dm-surface-alt);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
}