:host {
   position:   relative;
   min-height: var(--track-height);
   max-width:  100%;
   
   user-select: none;
   cursor: pointer;
   
   --minimum: 0;
   --maximum: 100;
   --value:   0;
   
   --fill-gradient: linear-gradient(to bottom, #7fc9fa, #014cb6, #619ff2);
   
   --track-border-color-upper: #A8A8A9;
   --track-border-color-lower: #CECDCF;
   
   /* private */
   --track-height: calc(4px * var(--scale, 1));
}

.track-full,
.track-bare {
   position: absolute;
   height:   var(--track-height);
   
   top: 50%;
   transform: translate(0, -50%);
}

.track-bare {
   box-sizing: border-box;
   width: 100%;
   
   border: calc(1px * var(--scale, 1)) solid var(--track-border-color-upper);
   border-top-color: var(--track-border-color-upper);
   border-bottom-color: var(--track-border-color-lower);
   border-radius: calc(2px * var(--scale, 1));
}
.track-full {
   --radius: calc(2px * var(--scale, 1));
   
   left:  0;
   width: calc(100% * (var(--value) / var(--maximum)));
   
   border-radius: var(--radius) 0 0 var(--radius);
   background: var(--fill-gradient) left calc(1px * var(--scale, 1))/1px calc(3px * var(--scale, 1)) repeat-x;
}

.thumb {
   --width: calc(15px * var(--scale, 1));
   
   position:  absolute;
   left:      calc((100% - var(--width)) * (var(--value) / var(--maximum)));
   top:       50%;
   transform: translate(0, -50%);
   width:     var(--width);
   
   --visible-width:  var(--width);
   --visible-height: calc(8px * var(--scale, 1));
}

:host(:not(.constant-thumb)) .thumb {
   /*
      Windows Media Player hides the seek slider thumb when we're at exactly zero.
   */
   --show-thumb: min(var(--value) * var(--value) * 9999999, 1);
   
   width:  calc(var(--width) * var(--show-thumb, 0));
   height: calc(4px * var(--scale, 1));
   
   background:
      linear-gradient(315deg, #c5fcffc0, #c5fcff50, #c5fcff00) right calc(1px * var(--scale, 1))/var(--width) calc(3px * var(--scale, 1)) no-repeat,
      var(--fill-gradient) left calc(1px * var(--scale, 1))/1px calc(3px * var(--scale, 1)) repeat-x
   ;
}
:host(.circular-thumb) .thumb {
   --visible-width:  calc(12px * var(--scale, 1));
   --visible-height: calc(12px * var(--scale, 1));
}

:host(.constant-thumb) .thumb,
:host(:hover) .thumb {
   --sprite: url(spritesheet-slider-thumb.svg#normal);
}
:host(:hover:not(:active):not(:state(active))) .thumb:hover {
   --sprite: url(spritesheet-slider-thumb.svg#hover);
}
:host(:active) .thumb,
:host(:state(active)) .thumb {
   --sprite: url(spritesheet-slider-thumb.svg#active);
}
:host(:disabled) .thumb {
   display: none;
}


:host(.constant-thumb) .thumb,
:host(:hover) .thumb,
:host(:active) .thumb,
:host(:state(active)) .thumb {
   --corner-size: calc(var(--visible-height) / 2);
   
   width:  var(--visible-width);
   height: var(--visible-height);
   
   left: calc((100% - var(--visible-width)) * (var(--value) / var(--maximum)));
   top:  50%;
   transform: translate(0, -50%);
   
   background: transparent none;
   border-image: var(--sprite) 50% 49.9% / var(--corner-size) var(--corner-size);
}