/*
 * Campos de formulário com rótulo acima do campo (templates/components/form-field/).
 * Tudo fica sob .df-form-field para não afetar outros formulários.
 */
.df-form-field {
    min-width: 0;
}

.df-form-field__label {
    display: block;
    margin: 0 0 .375rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-emphasis-color, #374151);
}

.df-form-field__addon {
    background: transparent;
    color: var(--bs-secondary-color, #6b7280);
    font-size: .8125rem;
    font-weight: 500;
}

/* Alinha o checkbox com os campos vizinhos, que têm rótulo acima */
.df-form-field--check {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    height: 100%;
}

.df-form-field--check .form-check {
    margin-bottom: .5rem;
}

.df-form-field--check .invalid-feedback {
    flex-basis: 100%;
}

/*
 * O layout.css dimensiona todo select2 para float label (3.5rem de altura e padding-top para o rótulo).
 * Aqui o select2 volta às medidas do .form-control do tema (padding .47rem .75rem, fonte .8125rem).
 * O fundo não leva !important para o select2.css do modo escuro continuar prevalecendo.
 */
.df-form-field .select2-container .select2-selection {
    background-color: #fff;
}

.df-form-field .select2-container .select2-selection--single {
    height: calc(1.5em + .94rem + 2px) !important;
    padding: .47rem .75rem !important;
    display: flex !important;
    align-items: center;
}

.df-form-field .select2-container .select2-selection--multiple {
    min-height: calc(1.5em + .94rem + 2px) !important;
    padding-top: .47rem !important;
}

/* O recuo à esquerda já vem do padding da .select2-selection */
.df-form-field .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    line-height: 1.5;
}

/* Desabilitado com o mesmo visual do .form-control:disabled do tema */
.df-form-field .select2-container--disabled .select2-selection {
    background-color: #eff2f7;
    cursor: not-allowed;
}

.df-form-field .select2-container--disabled .select2-selection__clear {
    display: none;
}