/* SubtitleManager: readable Video.js subtitle menu and settings dialog. */

/* Video.js lowercases menu items: keep track labels as written ("Français"). */
.video-js .vjs-subs-caps-button .vjs-menu li {
    text-transform: none;
}

/* The skin fixes the list at 12em: size it to the labels ("Paramètres des
   sous-titres" on one line), centred on the menu like the other lists. */
.video-js .vjs-subs-caps-button.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    width: max-content;
    min-width: 12em;
    left: 50%;
    transform: translateX(-50%);
}

.video-js .vjs-subs-caps-button.vjs-menu-button-popup .vjs-menu .vjs-menu-item {
    white-space: nowrap;
    padding: 0 .8em !important; /* beats the skin's `padding: 0 !important` */
}

/* The AVideo skin turns the selected item blue but keeps dark text on it. */
.video-js .vjs-subs-caps-button.vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
    background-color: #2483d5;
    color: #fff;
}

/* Full height above the control bar, opaque enough to read over the video. */
.video-js .vjs-modal-dialog.vjs-text-track-settings {
    height: auto;
    bottom: 3em;
    background-color: rgba(20, 24, 31, .94);
}

/* `.video-js * { color: inherit }` made the selects white on light grey. */
.video-js .vjs-text-track-settings select,
.video-js .vjs-text-track-settings option {
    color: #1b1f24;
    background-color: #fff;
}

.video-js .vjs-text-track-settings select {
    height: auto;
    padding: .15em .4em;
    border: 1px solid #c7ccd3;
    border-radius: 4px;
    cursor: pointer;
}

/* French labels are longer than the 7.3em Video.js allows. */
.video-js .vjs-text-track-settings fieldset span > select {
    max-width: 12em;
}

.video-js .vjs-text-track-settings legend {
    color: #fff;
}

/* Narrow players (the embed fills the viewport): one column instead of a
   right-hand column cut off by the edge. */
@media (max-width: 640px) {
    .video-js .vjs-text-track-settings .vjs-modal-dialog-content {
        grid-template-columns: 1fr;
        padding: 16px 16px 0;
    }
}

/* AVideo's title overlay showed through the dialog. */
.video-js:has(.vjs-text-track-settings:not(.vjs-hidden)) .hideOnPlayerUserInactive {
    visibility: hidden;
}