betajs/betajs-media-components

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

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

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

    .#{$css}-controlbar {
        @include absolute-align-full-bottom();
        height: $controlbar_footer_height;
        padding: 0 10px;
        .#{$css}-rightbutton-container {
            &.#{$css}-pause-button-container {
                position: absolute;
                right: 10px;
            }
        }
    }

    .#{$css}-controlbar-left-section {
        float: left;
        .#{$css}-circle-button {
            margin-right: 7px;
        }
    }

    .#{$css}-long-rounded-button {
        @include border-radius($controlbar_primarybutton_radius);
        display: inline-block;
        & > p {
            font-family: $font_family;
            font-size: $controlbar_primarybutton_font_size;
            padding: $controlbar_button_padding;
            margin: 0;
        }
    }

    .#{$css}-circle-button {
        @include background-rgba(0, 0, 0, 0.4, #979797);
        @include border-radius($controlbar_button_border_radius);
        color: $text_color;
        float: left;
        height: $controlbar_button_size;
        line-height: $controlbar_button_size;
        text-align: center;
        width: $controlbar_button_size;
    }

    .#{$css}-button-circle-selected, .#{$css}-button-inner:hover, .#{$css}-button-selected {
        background-color: $controlbar_button_hover_background;
        border-radius: $controlbar_button_border_radius;
        color: $controlbar_button_hover_color;
        cursor: pointer;
    }

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

    .#{$css}-indicator-container {
        height: $controlbar_button_size;
        line-height: $controlbar_button_size;
    }

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

    .#{$css}-settings {
        bottom: 55px;
        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 ;
        }
        input[type=radio]:checked + span {
            border: 3px solid $text_color;
            background-color: $button_color;
        }
    }

    .#{$css}-button-primary {
        @include border-radius($controlbar_primarybutton_radius);
        @include relative-align-all();
        @include transform-translate(0, 0);
        background-color: $chooser_primary_button_bgcolor;
        display: inline-block;
        font-family: $font_family;
        font-weight: 300;
        font-size: $controlbar_primarybutton_font_size;
        margin: 6px $controlbar_button_margin 0;
        min-width: $controlbar_primarybutton_min_width;
        padding: $controlbar_primarybutton_padding $controlbar_primarybutton_vertical_padding;
        z-index: 10;
    }

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

    .#{$css}-bubble-info {
        @include settings_bubble_bottom_shape ( 100%, 4px, 0, 0, 0, .5, #7f7f7f, 16px );
    }

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

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

    .#{$css}-label-container {
        float: left;
        text-align: right;
        width: 50%;
        .#{$css}-button-primary {
            color: $text_color;
            @include background-rgba(0, 0, 0, .4, #979797);
        }
    }

    .#{$css}-stop-button-container {
        float: right;
        text-align: left;
        width: 50%;
    }

    .#{$csscommon}-icon-cog { position: relative; top: 1px}
}