/* public/app/css/dash-simple-showcase-controls.css
 * Synopsis: Contrôles premium de l’essai homepage.
 * Objectif: Langue active et démarrage de dictée immédiatement évidents.
 */

.dash.dash--simple .lang-flags {
    align-content: flex-start;
}

.dash.dash--simple .lang-flags button {
    border-radius: calc(var(--dash-radius) * 1.35);
    min-height: 2.65rem;
    padding: .5rem .65rem;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.dash.dash--simple .lang-flags button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--dash-accent) 40%, var(--dash-line));
    transform: translateX(.15rem);
}

.dash.dash--simple .lang-flags button[aria-selected="true"] {
    border-width: 2px;
    box-shadow: 0 .55rem 1.3rem color-mix(in srgb, var(--dash-accent) 16%, transparent);
    font-size: 1rem;
    font-weight: 700;
    min-height: 4rem;
    order: -1;
    padding: .75rem;
}

.dash.dash--simple .lang-flags button[aria-selected="true"] img {
    height: 1.2rem;
    width: 1.7rem;
}

.dash.dash--simple .dash-sec-head--compose {
    min-height: 1.25rem;
}

.dash.dash--simple .dash-sec-head--compose .dash-label {
    font-size: .8rem;
    font-weight: 700;
}

.dash.dash--simple .dash-compose #ws-input {
    border-radius: calc(var(--dash-radius) * 1.8);
    font-size: clamp(1.08rem, 1.8vw, 1.35rem);
}

.dash.dash--simple .dash-compose #stt-btn.dash-go--in,
.dash.dash--simple .dash-compose #stt-btn.dash-go--in[aria-pressed="true"] {
    border-radius: calc(var(--dash-radius) * 1.7);
    font-family: var(--display);
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 750;
    justify-content: center;
    min-height: 4.8rem;
    padding: .85rem 1.3rem;
    text-align: center;
    width: 100%;
}

.dash.dash--simple .dash-compose-ico--copy {
    height: 2.5rem;
    min-width: 2.5rem;
}

@media (max-width: 1100px) {
    .dash.dash--simple .dash-compose #stt-btn.dash-go--in,
    .dash.dash--simple .dash-compose #stt-btn.dash-go--in[aria-pressed="true"] {
        min-height: 4.2rem;
    }
}
