@import '../styles';
@import './variables';

.bp-VolumeSliderControl {
    @include bp-Control--outline;

    position: relative;
    cursor: pointer;
}

.bp-VolumeVerticalSliderControl {
    @include bp-Control--outline;

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    margin: auto;
    padding: 16px;
    background: rgba(34, 34, 34, .9);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
    cursor: pointer;
}

.bp-VolumeSliderControl-thumb {
    position: absolute;
    top: calc(50% - #{$bp-SliderControl-thumb-radius});
    width: 10px;
    height: $bp-SliderControl-thumb-size;
    margin-left: -#{$bp-SliderControl-thumb-radius};
    background: $box-blue;
    border: 0;
    border-radius: $bp-SliderControl-thumb-size;
    cursor: pointer;
}

.bp-VolumeSliderControl-track {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: $bp-SliderControl-track-size;
    margin: auto $bp-SliderControl-track-space; // Center and allow the thumb to fully dock to edge of the track
    background: transparent linear-gradient($white, $white) no-repeat center border-box;
}

.bp-VolumeVerticalSliderControl-track-container {
    position: relative;
    width: 8px;
    height: 108px;
}

.bp-VolumeVerticalSliderControl-track-background {
    position: relative;
    left: 0;
    width: 8px;
    height: 108px;
    background-color: #55554f;
    border-radius: 20px;
}

.bp-VolumeVerticalSliderControl-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8px;
    background: white;
    border-radius: 20px;
}
