betajs/betajs-media-components

.#{$csstheme}.#{$css}-container {

  .#{$css}-video {
    background-color: $recorder_bgcolor;
  }

  .#{$cssrecorder}-overlay {
    top: 0;
  }

}

.#{$csstheme}-dashboard {
  @include absolute-align-all();
  height: 100%;
  opacity: 0.75;

  .#{$css}-controlbar {
    background-color: $controlbar_background;
    @include absolute-align-full-bottom();
    height: $controlbar_footer_height;
    padding: 0;
  }

  .#{$css}-button {
    background-color: white;
    border: none;
    border-right: $controlbar_button_border;
    box-sizing: border-box;
    color: $text_color;
    cursor: pointer;
    float: left;
    height: $controlbar_footer_height;
    line-height: $controlbar_footer_height;
    text-align: center;
    width: $controlbar_footer_height;
  }

  .#{$css}-button-inner {
    border: none;
    cursor: pointer;
    color: $controlbar_button_color;
    font-size: inherit;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .#{$css}-button-inner:hover {
    background-color: $controlbar_button_hover_background;
    color: $controlbar_button_hover_color;
  }

  .#{$css}-button-selected {
    background-color: $button_color;
    color: $text_color;
  }

  .#{$css}-indicator-container {
    height: $controlbar_height;
    line-height: $controlbar_height;
    padding-left: 10px;
  }

  .#{$css}-rightbutton-container {
    padding: 0;
  }

  .#{$css}-settings-front {
    @include absolute-align-full-bottom();
    max-height: initial;
    overflow: auto;
  }

  .#{$css}-settings {
    bottom: 50px;
    max-height: 14em;
    overflow: scroll;
    margin: 5px;
    padding: 0;
    label, .#{$cssvideorecorder}-add-stream {
      font-family: $font_family;
      font-weight: 300;
      font-size: $settings_font_size;
      color: $text_color_secondary;
    }
    hr {
      background-color: $settings_radio_color;
      height: 2px;
    }
    input[type=radio]:checked + span {
      border: 3px solid $settings_radio_color;
      background-color: $button_color;
    }
    span {
      border-color: $settings_radio_color;
      background-color: $settings_radio_color;
    }
  }

  .#{$css}-button-primary {
    background-color: $controlbar_primarybutton_background;
    border: none;
    border-radius: 0;
    color: $text_color;
    display: inline-block;
    font-family: $font_family;
    font-weight: 300;
    font-size: $controlbar_primarybutton_font_size;
    margin: 0;
    padding: 0 25px;
    min-width: $controlbar_primarybutton_min_width;
    @include relative-align-all();
    @include transform-translate(0, 0);
    z-index: 10;
    height: $controlbar_height;
    line-height: $controlbar_height;
  }

  .#{$css}-settings-button {
    background-color: $settings_bgcolor;
    cursor: pointer;
    margin: 15px 0 0 15px;
  }

  .#{$css}-settings label{
    color: $text_color_secondary;
  }

  .#{$css}-bubble-info {
    @include settings_bubble_bottom_shape ( 100%, 4px, 255, 255, 255, 1, #ffffff, 10px );
  }

  .#{$css}-controlbar-center-section {
    @include absolute-align-left();
    text-align: center;
    width: 100%;
  }

  .#{$css}-button-container {
    display: inline-block;
  }

  .#{$css}-label-container {
    text-align: center;
    width: 100%;
    .#{$css}-button-primary {
      background-color: inherit;
      border-left: $controlbar_button_border;
      border-right: $controlbar_button_border;
      color: $text_color_secondary;
      cursor: default;
    }
  }

  .#{$css}-stop-button-container {
    text-align: right;
    @include absolute-align-right-bottom();
    .#{$css}-button {
      color: $button_color;
    }
  }
}