.Volume {
    display: inline-block;
    left: 40px;
    position: relative;

    &[data-fullscreen=true] {
        left: 80px;
        margin-top: 3px;
    }

    &-mute-button,
    &-unmute-button {
        cursor: pointer;
        display: inline-block;
        margin-top: 2px;
        text-align: center;
    }

    &[data-fullscreen=true] .VideoPlayerIcons-mute,
    &[data-fullscreen=true] .VideoPlayerIcons-unmute {
        height: 32px;
        width: 32px;
    }

    &-bar {
        background: $timberwolf;
        cursor: pointer;
        display: inline-block;
        height: 4px;
        margin-left: 10px;
        transition: width .25s;
        vertical-align: super;
        width: 0;
    }

    &[data-fullscreen=true] &-bar {
        height: 8px;
        margin-top: 15px;
        vertical-align: top;
    }

    &-value {
        background: #e6e6e6;
        height: 100%;
    }

    &:hover .Volume-bar {
        transition: width .25s;
        width: 40px;
    }

    &[data-fullscreen=true]:hover .Volume-bar {
        width: 80px;
    }
}