/*
 * Structural styles for ui-slider, ui-slider-track, ui-slider-handle.
 *
 * The slider's outer height matches the standard control height so it
 * aligns with neighbouring buttons and inputs.
 */

ui-slider {
  display: inline-flex;
  align-items: center;
  min-height: var(--elation-control-h);
  min-width: 8em;
}
ui-slider > ui-slider-track {
  display: block;
  position: relative;
  width: 100%;
  height: .5em;
  cursor: pointer;
}
ui-slider-handle {
  display: block;
  position: absolute;
  width: .5em;
  height: 1.4em;
  cursor: pointer;
}
ui-slider-handle > ui-label {
  position: absolute;
  left: 20px;
  z-index: 100;
  pointer-events: none;
  padding: 0 var(--elation-space-1);
}
ui-slider-track[hover] ui-slider-handle > ui-label {
  display: block !important;
}

/* Touch devices: thicker track and bigger handle for finger control. */
@media (pointer: coarse) {
  ui-slider {
    min-width: 10em;
  }
  ui-slider > ui-slider-track {
    height: .9em;
  }
  ui-slider-handle {
    width: 1em;
    height: 1.9em;
  }
}