oonstyle.scss

$icon-color: #8297BD;
$hover-icon-color: #B5CEFF;
$progress-bar-color: #8297BD;
$controls-background: rgba(0,0,0,0.7);
$text-color: white;


.oonmedia-video .oonmedia-controls {
   background-color: $controls-background;
   > * {
      color: $icon-color;
   }
   &:hover {
      color: $hover-icon-color;
   }

   & > .oonmedia-textcontainer {
      color: $text-color;
   }
   button:hover > svg, button:focus > svg {
      color: $hover-icon-color;
   }   

   progress {
      color: $progress-bar-color;
   }
   progress::-moz-progress-bar {
      background-color: $progress-bar-color;
   }
   progress::-webkit-progress-value {
      background-color: $progress-bar-color;
   }
   progress::-webkit-progress-bar {
      background-color: white;
   }

   .oonmedia-volume-indicator {
      .oonmedia-current-volume {
         & > span {
            background-color: #ccc;
         }
      }
      &[data-state="volume-25"] {
         .volume-bar-25 {
            background: $icon-color;
         }
      }
      &[data-state="volume-50"] {
         .volume-bar-25 {
            background: $icon-color;
         }
         .volume-bar-50 {
            background: $icon-color;
         }
      }

      &[data-state="volume-75"] {
         .volume-bar-25 {
            background: $icon-color;
         }
         .volume-bar-50 {
            background: $icon-color;
         }
         .volume-bar-75 {
            background: $icon-color;
         }
      }

      &[data-state="volume-100"] {
         .volume-bar-25 {
            background: $icon-color;
         }
         .volume-bar-50 {
            background: $icon-color;
         }
         .volume-bar-75 {
            background: $icon-color;
         }
         .volume-bar-100 {
            background: $icon-color;
         }
      }      
   }
}