/*
 * BREVIO_SPACE_COLOR_DECOUPLE_V2
 *
 * A cor 6 dos Espaços é o roxo próprio do recurso.
 * Ela não acompanha a cor de destaque global do Brevio.
 */

.bg-space-purple {
    background-color: #7b60fb !important;
}

.badge-space-purple {
    background-color: rgba(123, 96, 251, .2);
    color: #522efa;
}

a.badge-space-purple:hover,
a.badge-space-purple:focus {
    background-color: rgba(123, 96, 251, .4);
    color: #522efa;
}

a.badge-space-purple:focus {
    outline: 0;
    box-shadow:
        0 0 0 .2rem
        rgba(123, 96, 251, .5);
}

html.dark .bg-space-purple {
    background-color: #ad9cfd !important;
}

html.dark .badge-space-purple {
    background-color: rgba(173, 156, 253, .2);
    color: #d6cdfe;
}

html.dark a.badge-space-purple:hover,
html.dark a.badge-space-purple:focus {
    background-color: rgba(173, 156, 253, .4);
    color: #d6cdfe;
}

/*

 * BREVIO_SPACE_COLOR_PALETTE_V4

 *

 * Seis cores adicionais independentes da

 * cor de destaque global do site.

 */

.bg-space-blue,

.badge-space-blue {

    --space-rgb: 37, 99, 235;

    --space-text: #1d4ed8;

}

.bg-space-orange,

.badge-space-orange {

    --space-rgb: 234, 88, 12;

    --space-text: #c2410c;

}

.bg-space-pink,

.badge-space-pink {

    --space-rgb: 219, 39, 119;

    --space-text: #be185d;

}

.bg-space-brown,

.badge-space-brown {

    --space-rgb: 121, 85, 72;

    --space-text: #5d4037;

}

.bg-space-olive,

.badge-space-olive {

    --space-rgb: 130, 119, 23;

    --space-text: #6d6414;

}

.bg-space-slate,

.badge-space-slate {

    --space-rgb: 71, 85, 105;

    --space-text: #475569;

}

.bg-space-blue,

.bg-space-orange,

.bg-space-pink,

.bg-space-brown,

.bg-space-olive,

.bg-space-slate {

    background-color:

        rgb(var(--space-rgb)) !important;

}

.badge-space-blue,

.badge-space-orange,

.badge-space-pink,

.badge-space-brown,

.badge-space-olive,

.badge-space-slate {

    background-color:

        rgba(var(--space-rgb), .18);

    color:

        var(--space-text);

}

a.badge-space-blue:hover,

a.badge-space-blue:focus,

a.badge-space-orange:hover,

a.badge-space-orange:focus,

a.badge-space-pink:hover,

a.badge-space-pink:focus,

a.badge-space-brown:hover,

a.badge-space-brown:focus,

a.badge-space-olive:hover,

a.badge-space-olive:focus,

a.badge-space-slate:hover,

a.badge-space-slate:focus {

    background-color:

        rgba(var(--space-rgb), .36);

    color:

        var(--space-text);

}

a.badge-space-blue:focus,

a.badge-space-orange:focus,

a.badge-space-pink:focus,

a.badge-space-brown:focus,

a.badge-space-olive:focus,

a.badge-space-slate:focus {

    outline: 0;

    box-shadow:

        0 0 0 .2rem

        rgba(var(--space-rgb), .5);

}

html.dark .bg-space-blue,

html.dark .badge-space-blue {

    --space-rgb: 96, 165, 250;

    --space-text: #bfdbfe;

}

html.dark .bg-space-orange,

html.dark .badge-space-orange {

    --space-rgb: 251, 146, 60;

    --space-text: #fed7aa;

}

html.dark .bg-space-pink,

html.dark .badge-space-pink {

    --space-rgb: 244, 114, 182;

    --space-text: #fbcfe8;

}

html.dark .bg-space-brown,

html.dark .badge-space-brown {

    --space-rgb: 188, 170, 164;

    --space-text: #d7ccc8;

}

html.dark .bg-space-olive,

html.dark .badge-space-olive {

    --space-rgb: 190, 202, 88;

    --space-text: #ecf3bd;

}

html.dark .bg-space-slate,

html.dark .badge-space-slate {

    --space-rgb: 148, 163, 184;

    --space-text: #e2e8f0;

}