/* Seletor de idioma por bandeiras (Area do Cliente e Catalogo).
   Usado pelo partial ~/Views/Shared/_SeletorIdioma.cshtml. */

.seletor-idioma {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.seletor-idioma-item {
    display: inline-flex;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 5px;
    line-height: 0;
    opacity: .75;
    filter: grayscale(35%);
    transition: opacity .15s ease, filter .15s ease, border-color .15s ease;
}

    /* As imagens sao quadradas e trazem margem transparente em volta da bandeira,
       por isso o tamanho aqui e maior do que a bandeira aparenta na tela. */
    .seletor-idioma-item img {
        display: block;
        width: 32px;
        height: 32px;
    }

    .seletor-idioma-item:hover,
    .seletor-idioma-item:focus {
        opacity: 1;
        filter: none;
    }

    .seletor-idioma-item.ativo {
        opacity: 1;
        filter: none;
        border-color: var(--corPrimaria, #696cff);
        cursor: default;
    }

/* Variante para barras escuras, como a do catalogo, onde a cor primaria
   costuma ser o proprio fundo e nao marcaria a bandeira ativa. */
.seletor-idioma-escuro .seletor-idioma-item {
    opacity: .8;
}

    .seletor-idioma-escuro .seletor-idioma-item.ativo {
        border-color: #fff;
    }