/* Drawn mouth (Components/Objects/Mouth: MouthGlyph) and its player (MouthPlayer).
   Colours: --en-glyph-* in tokens.css. */

/* ---------- MouthGlyph ---------- */

.mouth-glyph {
    display: block;
    width: 100%;
    height: auto;
}

.mouth-glyph path {
    transition: d .4s cubic-bezier(.3, .7, .3, 1), opacity .27s, fill .4s, stroke .4s;
}

.mouth-lips {
    fill: var(--en-glyph-lip);
}

/* Outline of the lips and of the opening */
.mouth-edge {
    fill: none;
    stroke: var(--en-glyph-lip-edge);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.mouth-cavity {
    fill: var(--en-glyph-cavity);
}

.mouth-teeth {
    fill: var(--en-glyph-teeth);
    stroke: color-mix(in srgb, var(--en-glyph-cavity) 28%, transparent);
    stroke-width: 0.6;
    stroke-linecap: round;
}

.mouth-seam {
    fill: none;
    stroke: var(--en-glyph-cavity);
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* Colours of the style images, one per Mouth Shape (MouthColors). Default; switched off in Account › Preferences
   ("Colored mouth animations"), App.razor leaves out html[data-mouth-colors="on"] then and the natural colours apply. */
[data-mouth-colors="on"] .mouth-lips {
    fill: var(--mouth-color);
}

[data-mouth-colors="on"] .mouth-edge,
[data-mouth-colors="on"] .mouth-seam {
    stroke: var(--mouth-color-dark);
}

[data-mouth-colors="on"] .mouth-cavity {
    fill: var(--mouth-color-dark);
}

[data-mouth-colors="on"] .mouth-teeth {
    fill: #FFFFFF;
    stroke: rgba(0, 0, 0, .45);
}

/* ---------- MouthPlayer ---------- */

.mouth-player {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.mouth-player-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.mouth-player-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mouth-player-step {
    width: 30px;
    height: 30px;
    border: 1px solid var(--en-line-strong);
    border-radius: 50%;
    background: var(--en-surface);
    color: var(--en-ink-soft);
    font: 600 0.82rem/1 var(--en-font-body);
}

.mouth-player-step:hover {
    background: var(--en-surface-2);
}

.mouth-player-step[aria-pressed="true"] {
    border-color: var(--en-mouth);
    background: var(--en-mouth);
    color: var(--en-on-accent);
}

.mouth-player-step:focus-visible {
    outline: 2px solid var(--en-mouth);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mouth-glyph path {
        transition: none;
    }
}