/*
 * Estado de foco global dos campos do Conecta PCSE.
 *
 * Carregado depois dos estilos das telas para que inputs comuns, Bootstrap e
 * Select2 apresentem a mesma borda verde e o mesmo halo em todos os módulos.
 */

:is(#pcse-global-input-focus, .app-content, .modal)
    :is(
        #pcse-global-input-control,
        input:not(
            [type="button"],
            [type="submit"],
            [type="reset"],
            [type="checkbox"],
            [type="radio"],
            [type="range"],
            [type="color"],
            [type="hidden"]
        ),
        textarea,
        select,
        .form-control,
        .form-select,
        [contenteditable="true"]
    ):focus {
    color: var(--bs-body-color) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(var(--bs-theme-rgb), 0.72) !important;
    background-color: rgba(var(--bs-theme-rgb), 0.035) !important;
    outline: 0 !important;
    box-shadow:
        0 0 0 0.1875rem rgba(var(--bs-theme-rgb), 0.08),
        0 0 1rem rgba(var(--bs-theme-rgb), 0.08) !important;
}

:is(#pcse-global-input-focus, .app-content, .modal)
    :is(
        .select2-container--focus,
        .select2-container--open
    )
    :is(
        #pcse-global-select2-control,
        .select2-selection--single,
        .select2-selection--multiple
    ) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(var(--bs-theme-rgb), 0.72) !important;
    background-color: rgba(var(--bs-theme-rgb), 0.035) !important;
    outline: 0 !important;
    box-shadow:
        0 0 0 0.1875rem rgba(var(--bs-theme-rgb), 0.08),
        0 0 1rem rgba(var(--bs-theme-rgb), 0.08) !important;
}

:is(#pcse-global-input-focus, .app-content, .modal)
    :is(
        .support-control-wrap,
        .input-group,
        [class*="search-wrap"],
        [class*="search-field"],
        [class*="search-control"],
        [class*="busca-wrap"],
        [class*="busca-campo"]
    ):focus-within {
    border-color: rgba(var(--bs-theme-rgb), 0.72) !important;
    outline: 0 !important;
    box-shadow:
        0 0 0 1px rgba(var(--bs-theme-rgb), 0.72),
        0 0 0 0.1875rem rgba(var(--bs-theme-rgb), 0.08),
        0 0 1rem rgba(var(--bs-theme-rgb), 0.08) !important;
}

:is(#pcse-global-input-focus, .app-content, .modal)
    .input-group:focus-within
    > :is(.input-group-text, .btn) {
    border-color: rgba(var(--bs-theme-rgb), 0.72) !important;
}

:is(#pcse-global-input-focus, .app-content, .modal)
    .pcse-form-tracked
    :is(
        .pcse-field-empty:focus,
        .pcse-field-empty:focus-visible,
        .pcse-field-empty.select2-hidden-accessible
            + .select2-container--open
            .select2-selection,
        .pcse-field-empty
            + .pcse-dtp-wrapper
            .pcse-dtp-display:focus
    ) {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: var(--bs-theme, #00e6a8) !important;
}

@media (prefers-reduced-motion: reduce) {
    :is(#pcse-global-input-focus, .app-content, .modal)
        :is(input, textarea, select, .form-control, .form-select),
    :is(#pcse-global-input-focus, .app-content, .modal)
        .select2-selection {
        transition: none !important;
    }
}