/*
|--------------------------------------------------------------------------
| Adaptação do Select2 (38 telas usam) — só dentro de .ds
|--------------------------------------------------------------------------
|
| Deixa o Select2 com a mesma altura, borda, foco e estados do .ds-select.
| O dropdown aberto vai para o <body>; ele recebe a classe .ds-select2-dropdown
| quando o campo é iniciado com DS.select().
|
*/

.ds .select2-container {
    width: 100% !important;
}

.ds .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;

    height: auto;
    min-height: var(--ds-control-height);

    border: var(--ds-border-width) solid var(--ds-color-border-control);
    border-radius: var(--ds-radius-md);

    background: var(--ds-color-surface);

    font: var(--ds-text-body);
}

.ds .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 34px 0 var(--ds-control-padding-x);

    color: var(--ds-color-text);

    line-height: 20px;
}

.ds .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ds-color-text-placeholder);
}

.ds .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 8px;

    height: 100%;
}

.ds .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ds-color-text-secondary) transparent transparent;
}

.ds .select2-container--default:hover .select2-selection--single {
    border-color: var(--ds-color-text-muted);
}

.ds .select2-container--default.select2-container--focus .select2-selection--single,
.ds .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ds-color-border-focus);

    box-shadow: var(--ds-focus-ring);
}

.ds .select2-container--default.select2-container--disabled .select2-selection--single {
    border-color: var(--ds-color-border);

    background: var(--ds-color-surface-sunken);

    cursor: not-allowed;
}

.ds .select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: var(--ds-color-text-disabled);
}

/* Campo com erro: a classe .is-invalid no <select> original é espelhada */
.ds .is-invalid + .select2-container--default .select2-selection--single {
    border-color: var(--ds-color-danger-solid);
}

/* Dropdown aberto (fora de .ds) */

.ds-select2-dropdown.select2-dropdown {
    overflow: hidden;

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);

    background: var(--ds-color-surface);

    font: var(--ds-text-body-sm);

    box-shadow: var(--ds-shadow-floating);
}

.ds-select2-dropdown .select2-search--dropdown {
    padding: var(--ds-space-2);
}

.ds-select2-dropdown .select2-search__field {
    min-height: 32px;
    padding: 4px 10px;

    border: var(--ds-border-width) solid var(--ds-color-border-control) !important;
    border-radius: var(--ds-radius-md);

    font: var(--ds-text-body-sm);
}

.ds-select2-dropdown .select2-search__field:focus {
    border-color: var(--ds-color-border-focus) !important;
    outline: none;

    box-shadow: var(--ds-focus-ring);
}

.ds-select2-dropdown .select2-results__option {
    padding: 7px var(--ds-space-3);
}

.ds-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--ds-color-surface-hover) !important;

    color: var(--ds-color-text) !important;
}

.ds-select2-dropdown .select2-results__option[aria-selected="true"] {
    background: var(--ds-color-surface-selected);

    color: var(--ds-color-primary-active);
    font-weight: var(--ds-font-weight-medium);
}

.ds-select2-dropdown .select2-results__message {
    color: var(--ds-color-text-muted);
}