/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/* customizations to mediaelementplayer css */

/*
  Because this file is not proccessed by our brandable_css sass pipeline,
  it cannot use our sass-direction helpers. So we have to handle RTL manually
  by putting direction-specific styles in [dir="ltr"] or [dir="rtl"] blocks.
*/
/* stylelint-disable property-disallowed-list, declaration-property-value-disallowed-list */

/* good menu widths */
.mejs-sourcechooser-selector {
  width: 160px;
}
.mejs-sourcechooser-selector label {
  width: 160px !important;
}

.mejs-captions-selector {
  width: 105px;
}
[dir="ltr"]  .mejs-captions-selector { text-align: left }
[dir="rtl"]  .mejs-captions-selector { text-align: right }

.mejs-captions-selector label {
  width: 70px !important;
}

/* Subtitile upload link */
.mejs-captions-selector .upload-track {
  color: white;
  margin-top: 3px;
  margin-bottom: 5px;
}
[dir="ltr"] .mejs-captions-selector .upload-track {
  margin-right: 0px;
  margin-left: 5px;
  float: left;
}
[dir="rtl"] .mejs-captions-selector .upload-track {
  margin-left: 0px;
  margin-right: 5px;
  float: right;
}

/* "x" button to remove a subtitle */
.mejs-captions-selector a[data-remove] {
  position: absolute;
  top: 0;
  color: white;
}
[dir="ltr"] .mejs-captions-selector a[data-remove] { right: 0 }
[dir="rtl"] .mejs-captions-selector a[data-remove] { left: 0 }


/* style menu items without a radio button */
.mejs-button [role="menu"] {
  padding: 0 !important;
}
 /* compensate for above 0 padding */
 .mejs-button [role="menu"] ul li {
  position: relative;
  padding: 0 10px !important;
}
/* add a hover effect */
.mejs-button [role="menu"] ul li:hover {
  background-color: #c8c8c8 !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
}
.mejs-button [role="menu"] ul li input {
  border: 0;
  clip: rect(0 0 0 0);
  position: absolute;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
}
.mejs-button [role="menu"] ul li label {
  cursor: pointer;
}
[dir="ltr"] .mejs-button [role="menu"] ul li label { margin-left: 5px }
[dir="rtl"] .mejs-button [role="menu"] ul li label { margin-right: 5px }


.mejs-button [role="menu"] label.mejs-selected {
  color: #21f8f8 !important;
}

/* stylelint-enable property-disallowed-list, declaration-property-value-disallowed-list */