/* public/app/css/beta-badge.css
 * Synopsis: Badge Bêta discret multi-zones.
 * Objectif: Fusionner la mention à la marque et aux panneaux.
 */

.vok-beta {
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: .35em;
    color: inherit;
    display: inline-flex;
    font-family: var(--body);
    font-size: .55em;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1;
    opacity: .62;
    padding: .28em .48em .22em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.vok-beta--brand {
    align-self: center;
    flex: 0 0 auto;
    font-size: .38em;
    margin-left: .15em;
    opacity: .55;
    transform: translateY(.12em);
}

.vok-beta--mast {
    font-size: .68em;
    letter-spacing: .16em;
    margin-left: .35rem;
    opacity: .55;
}

.vok-beta--note {
    border: 0;
    font-size: inherit;
    letter-spacing: inherit;
    margin: 0;
    opacity: .7;
    padding: 0;
}

.vok-beta--credit {
    border-color: color-mix(in srgb, currentColor 18%, transparent);
    font-size: .72em;
    margin-left: .2rem;
    opacity: .5;
    padding: .15em .4em .12em;
}

.vok-beta--panel {
    font-size: .72em;
    letter-spacing: .12em;
    margin-left: .35rem;
    opacity: .5;
    transform: translateY(-.05em);
}

.vok-beta--eyebrow {
    border: 0;
    font-size: inherit;
    letter-spacing: inherit;
    margin-left: .45rem;
    opacity: .55;
    padding: 0;
}

.brand,
.dash .dash-brand {
    align-items: center;
}

.dash .dash-lang-head__lead {
    align-items: baseline;
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: .15rem .25rem;
    min-width: 0;
}

.dash .dash-lang-head__lead .dash-label {
    margin: 0;
}