.slider{--slider-width:100%;--slider-height:6px;--slider-bg:#525252;--slider-border-radius:999px;--level-color:#fff;--level-transition-duration:.1s;--icon-margin:15px;--icon-color:var(--slider-bg);--icon-size:25px;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.slider .volume{display:inline-block;vertical-align:top;margin-right:var(--icon-margin);color:var(--icon-color);width:var(--icon-size);height:auto}.slider .level{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-width);height:var(--slider-height);background:var(--slider-bg);overflow:hidden;border-radius:var(--slider-border-radius);-webkit-transition:height var(--level-transition-duration);-o-transition:height var(--level-transition-duration);transition:height var(--level-transition-duration);cursor:inherit}.slider .level::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;-webkit-box-shadow:-200px 0 0 200px var(--level-color);box-shadow:-200px 0 0 200px var(--level-color)}.slider:hover .level{height:calc(var(--slider-height) * 2)}