/*!
 * Copyright (C) 2016 Singular Studios (a.k.a Atom Tecnologia) - www.opensingular.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Cores customizáveis pelo deployment.
 *
 * O CSS extra da Aparência entra em layout4/css/custom.css, que é registrado
 * ANTES deste arquivo, então regra de cliente com a mesma especificidade perde
 * por ordem no cascade, e as regras de foco abaixo ainda carregam !important
 * para vencer o tema Metronic. Nenhum cliente deveria ter que descobrir isso
 * para trocar uma cor.
 *
 * Por isso as cores saem de custom properties que este arquivo NUNCA declara,
 * só consome com valor de fallback. Variável não declarada não participa do
 * cascade, então o `:root` do cliente vale mesmo vindo de um arquivo anterior e
 * mesmo contra !important. Para trocar tudo, uma regra no CSS extra:
 *
 *     :root {
 *         --singular-focus-color: #A30000;
 *     }
 *
 * | Variável                  | Onde aparece                        | Default             |
 * |---------------------------|-------------------------------------|---------------------|
 * | --singular-focus-color    | todo indicador de foco por teclado  | #007084             |
 * | --singular-skip-menu-bg   | fundo da barra de atalhos           | --singular-focus-color |
 * | --singular-skip-menu-fg   | texto da barra de atalhos           | #fff                |
 *
 * O estado de foco do link da barra inverte as duas últimas, e a tecla impressa
 * usa `currentColor`, então qualquer par de cores continua legível nos dois
 * estados sem variável adicional.
 */

/*
 * Acessibilidade, WCAG 2.4.7 (Focus Visible).
 *
 * Este arquivo deve ser o ULTIMO stylesheet registrado (ver
 * DefaulSingularWebResourcesFactory#getDynamicStylePaths).
 *
 * A pseudo-classe é repetida três vezes de propósito. O tema Metronic zera o
 * outline de foco em cerca de 30 regras com !important, e várias delas são
 * mais específicas que um seletor de classe: `.bootstrap-select .btn:focus`
 * (0,3,0) atinge todo select de formulário e `.daterangepicker .input-mini`
 * (0,2,0) atinge os campos de data. Com !important dos dois lados quem decide
 * é a especificidade, então uma regra 0,1,0 perderia para elas. A repetição
 * leva esta regra a 0,3,0 e a ordem no cascade resolve o empate.
 *
 * :focus-visible não acende no clique em botões, links e checkbox, então ali
 * o contorno só aparece para quem está tabulando. Campos de digitação são a
 * exceção, tratada logo abaixo.
 */
:focus-visible:focus-visible:focus-visible {
    outline: 2px solid var(--singular-focus-color, #007084) !important;
    outline-offset: 2px;
}

/*
 * Campo de digitação casa com :focus-visible também no clique, por especificação
 * e em todos os browsers, e o CSS não distingue clique de Tab. Em vez do
 * contorno de teclado, a borda do campo passa para a cor de foco, que vale nos
 * dois casos: o mesmo desenho do campo de busca do portal gov.br.
 *
 * O :is() vale pelo argumento mais específico (0,1,1), então esta regra chega a
 * 0,4,1 e vence a de cima (0,3,0).
 */
:is(.form-control, textarea, input:not([type]), input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"],
    input[type="time"], input[type="week"]):focus-visible:focus-visible:focus-visible {
    outline: none !important;
}

/*
 * Sem !important e em 0,2,1 de propósito: vence o `.form-control:focus` do
 * Bootstrap (0,2,0) por especificidade e perde para o `.has-error
 * .form-control:focus` (0,3,0), então o campo com erro mantém a borda vermelha
 * justamente enquanto o usuário o corrige.
 */
:is(.form-control, textarea, input:not([type]), input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"],
    input[type="time"], input[type="week"]):focus-visible {
    border-color: var(--singular-focus-color, #007084);
}

/*
 * As telas de login, de esqueci a senha e de recuperação de senha herdam do
 * tema `.login .content .form-control:focus` (0,3,0, em pages/login.scss),
 * que pinta a borda de um cinza quase igual ao da borda sem foco e venceria a
 * regra de cima. Em 0,4,0 a cor de foco volta. Essas telas não usam .has-error.
 */
.login .content .form-control:focus-visible {
    border-color: var(--singular-focus-color, #007084);
}

/*
 * Destino do foco depois de uma atualização AJAX que troca o conteúdo de uma
 * listagem (paginação, filtro). O container recebe tabindex="-1" para aceitar
 * foco programático sem entrar na ordem de tabulação, e não deve exibir o
 * indicador: quem está sendo apontado é a região, não um controle.
 */
[data-singular-focus-region]:focus,
[data-singular-focus-region]:focus-visible:focus-visible:focus-visible {
    outline: none !important;
}

/*
 * Os destinos dos skip links são regiões de foco como as outras, mas aqui o
 * indicador precisa aparecer: quem ativou o salto não tem outro sinal de que
 * ele funcionou, porque a página não rola quando já estava no topo
 * (WCAG 2.4.7).
 *
 * O seletor de id (1,1,0) vence a regra de supressão acima (0,4,0), que segue
 * valendo para as regiões apontadas depois de um AJAX. O offset é negativo
 * porque a região ocupa a largura do conteúdo e um contorno para fora seria
 * cortado.
 */
#singular-page-content:focus-visible,
#singular-page-menu:focus-visible {
    outline: 2px solid var(--singular-focus-color, #004e66) !important;
    outline-offset: -2px;
}

/*
 * Acessibilidade, WCAG 2.4.1 (Bypass Blocks) e eMAG, Recomendação 1.5.
 *
 * A navegação pelo menu é carregamento de página inteiro, e não AJAX: o browser
 * reinicia o foco no começo do documento a cada tela aberta. Sem estes atalhos
 * são cerca de 27 paradas de Tab, o cabeçalho e o menu lateral inteiro, antes de
 * chegar ao conteúdo da tela que o usuário acabou de abrir.
 *
 * A barra inteira desce ao primeiro Tab e mostra os dois atalhos de uma vez, o
 * mesmo desenho do gov.br: um link sozinho no canto passa despercebido.
 *
 * Fica escondida por translate em vez de display:none ou visibility:hidden, que
 * a tirariam da ordem de tabulação e a tornariam inalcançável justamente por
 * quem precisa dela. O z-index fica acima do cabeçalho fixo e do
 * blocking_overlay (10051).
 */
.singular-skip-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10052;
    display: flex;
    justify-content: center;
    height: 40px;
    transform: translateY(-100%);
    transition: transform 0.15s ease-out;
}

.singular-skip-menu:focus-within {
    transform: none;
}

.singular-skip-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 16px;
    background-color: var(--singular-skip-menu-bg, var(--singular-focus-color, #007084));
    color: var(--singular-skip-menu-fg, #fff);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
}

/*
 * O `:focus` repetido chega a 0,3,1 e vence a regra genérica de indicador de
 * foco lá em cima, que é 0,3,0. Sem isso o `outline-offset` positivo dela
 * valeria aqui, e o contorno da barra, que fica colada em top:0, seria cortado
 * pela borda da janela.
 */
.singular-skip-menu a:focus:focus:focus {
    background-color: var(--singular-skip-menu-fg, #fff);
    color: var(--singular-skip-menu-bg, var(--singular-focus-color, #007084));
    outline: 2px solid var(--singular-focus-color, #007084) !important;
    outline-offset: -2px !important;
}

/*
 * A tecla de atalho impressa ao lado do rótulo, como no gov.br: sem isso não há
 * como o usuário descobrir que o accesskey existe.
 *
 * Contorno em currentColor em vez de fundo com cor própria: assim ela acompanha
 * a inversão do link no foco e qualquer paleta que o deployment configure, sem
 * precisar de variável só para ela.
 */
.singular-skip-menu-key {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}