/*
|--------------------------------------------------------------------------
| Marca do Backoffice
|--------------------------------------------------------------------------
|
| Flor COMEPI + "Backoffice" escrito na fonte do sistema (texto real,
| não imagem: nítido em qualquer tela e lido por leitores de tela).
|
|   .ds-brand             fundo claro: nome em grafite
|   .ds-brand--escura     fundo escuro (menu lateral): nome em branco
|   .ds-brand--compacta   só a flor (menu recolhido, espaços pequenos)
|
| Uso: view('Layouts/design-system/marca', ['variante' => 'escura']).
| Não usar o antigo backoffice.png.
|
| Fica fora do escopo .ds porque o menu lateral ainda é do tema.
|
*/

.ds-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

    font: 600 21px/1 var(--ds-font);
    letter-spacing: -0.025em;
    text-decoration: none;
    white-space: nowrap;
}

.ds-brand__flor {
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    fill: var(--ds-color-brand);
}

.ds-brand__nome {
    /* o "B" encosta na flor sem ficar colado */
    margin-top: 1px;
}

.ds-brand--escura {
    color: var(--ds-graphite-0);
}

.ds-brand--compacta {
    gap: 0;
}

.ds-brand--compacta .ds-brand__flor {
    width: 26px;
    height: 26px;
}

.ds-brand--compacta .ds-brand__nome {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;
    clip: rect(0 0 0 0);

    white-space: nowrap;
}