/* The reels player's bar: the studio door where the clip count used to sit, and a sound
   switch that says which way it is by shape instead of by word.

   Both controls take the 38px circle the close button already wears, so the bar reads as three
   matching doors. Only geometry is set here — the fill, border and the white
   `[aria-pressed="true"]` treatment stay in media.css, because restating them at this
   specificity would switch the pressed state off. */

.mtv-reels .mtv-reels__live {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.mtv-reels .mtv-reels__live:active {
    background: rgba(255, 255, 255, .34);
}

.mtv-reels .mtv-reels__sound {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
}

/* One glyph at a time, picked by the state the script writes. The muted cone is the default
   because the player always starts muted, and a browser that refuses the unmute pushes the
   state back here rather than lying about it. */
.mtv-reels .mtv-reels__sound .mtv-reels__sound-glyph--on {
    display: none;
}

.mtv-reels .mtv-reels__sound[data-sound-state='on'] .mtv-reels__sound-glyph--on {
    display: block;
}

.mtv-reels .mtv-reels__sound[data-sound-state='on'] .mtv-reels__sound-glyph--off {
    display: none;
}