:host {
  /**
  * @prop --sliderThumbBackgroundColor: Background color of the slider's thumb.
  */
  /**
  * @prop --sliderThumbBorderColor: Border color of the slider's thumb.
  */
  /**
  * @prop --sliderHoverThumbBackgroundColor: Background color of the slider's thumb in a hover state.
  */
  /**
  * @prop --sliderHoverThumbBorderColor: Border color of the slider's thumb in a hover state.
  */
  /**
  * @prop --sliderTrackBackgroundColor: Background color of the slider's track.
  */
  /**
  * @prop --sliderSelectedThumbBackgroundColor: Background color of the slider's thumb in a selected state.
  */
  /**
  * @prop --sliderSelectedThumbBorderColor: Border color of the slider's thumb in a selected state.
  */
  /**
  * @prop --sliderThumbSize: Size of the slider's thumb, both width and height.
  */
  /**
  * @prop --sliderThumbBorderSize: Size of slider's thumb border.
  */
  /**
  * @prop --sliderTrackCursor: The type of cursor for the slider's track.
  */
  /**
  * @prop --valuePercent: The current value of the slider in a percent.
  */
  /**
  * @prop --top: Determines the top value of the slider thumb.
  */
  --sliderThumbSize: 19px;
  --sliderThumbBorderSize: 2px;
  --sliderTrackHeight: 1px;
  --sliderTrackBeforeThumbHeight: 5px;
  --sliderTrackCursor: pointer;
  --valuePercent: 50%;
  --top: calc(var(--sliderThumbSize) / -2.7);
  display: flex;
  flex-grow: 1;
  flex-flow: column;
  cursor: pointer;
}

*[hidden] {
  display: none !important;
}

.rux-slider {
  display: flex;
  height: 20px;
}
.rux-slider :hover {
  cursor: var(--sliderTrackCursor);
}
.rux-slider :disabled {
  cursor: not-allowed;
}

.rux-range {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: none;
  width: 100%;
  margin: 0px;
  color: transparent;
}

input[type=range]:focus {
  outline: none;
}

/****** Track ******/
/* Track -> WebKit */
.rux-range::-webkit-slider-runnable-track {
  display: flex;
  align-items: center;
  max-width: 100%;
  /* width: 100%; */
  cursor: var(--sliderTrackCursor, pointer);
  border-radius: 2.5px;
  min-height: var(--sliderTrackHeight);
  max-height: var(--sliderTrackBeforeThumbHeight);
  background-image: linear-gradient(var(--sliderTrackBackgroundColor), var(--sliderTrackBackgroundColor)), linear-gradient(var(--sliderTrackBackgroundColor), var(--sliderTrackBackgroundColor));
  background-size: var(--valuePercent) var(--sliderTrackBeforeThumbHeight), 100% var(--sliderTrackHeight);
  background-repeat: no-repeat no-repeat;
  background-position: left, right;
}

.rux-range:disabled::-webkit-slider-runnable-track {
  opacity: var(--disabledOpacity, 0.4);
  cursor: var(--disabledCursor);
}

/* Track -> Moz */
.rux-range::-moz-range-track {
  display: flex;
  align-items: center;
  max-width: 100%;
  /* width: 100%; */
  cursor: var(--sliderTrackCursor, pointer);
  border-radius: 2.5px;
  min-height: var(--sliderTrackHeight);
  max-height: var(--sliderTrackBeforeThumbHeight);
  background-image: linear-gradient(var(--sliderTrackBackgroundColor), var(--sliderTrackBackgroundColor)), linear-gradient(var(--sliderTrackBackgroundColor), var(--sliderTrackBackgroundColor));
  background-size: calc(1 * var(--valuePercent)) var(--sliderTrackBeforeThumbHeight), 100% var(--sliderTrackHeight);
  background-repeat: no-repeat no-repeat;
  background-position: left, right;
}

.rux-range:disabled::-moz-range-track,
.rux-range:disabled::-moz-range-progress {
  opacity: var(--disabledOpacity, 0.4);
  cursor: var(--disabledCursor);
}

.rux-range::-moz-range-progress {
  background-color: var(--sliderSelectedTrackBackgroundColor);
}

.rux-input:disabled {
  opacity: var(--disabledOpacity, 0.4);
  cursor: var(--disabledCursor);
}

/* Track -> Ms */
.rux-range::-ms-track {
  display: flex;
  align-items: center;
  max-width: 100%;
  /* width: 100%; */
  cursor: var(--sliderTrackCursor, pointer);
  border-radius: 2.5px;
  min-height: var(--sliderTrackHeight);
  max-height: 5px;
  background-image: linear-gradient(var(--sliderTrackBackgroundColor), var(--sliderTrackBackgroundColor)), linear-gradient(var(--sliderTrackBackgroundColor), var(--sliderTrackBackgroundColor));
  background-size: var(--valuePercent) var(--sliderTrackBeforeThumbHeight), 100% var(--sliderTrackHeight);
  background-repeat: no-repeat no-repeat;
  background-position: left, right;
}

.rux-range::-ms-fill-lower {
  height: 2px;
  background-color: #4dacff;
}

.rux-range::-ms-fill-upper {
  height: 2px;
  background-color: var(--sliderTrackBackgroundColor);
}

/*****  Thumb ******/
/* Thumb -> Webkit */
.rux-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: var(--top);
  height: var(--sliderThumbSize);
  width: var(--sliderThumbSize);
  border-radius: 100%;
  border: var(--sliderThumbBorderSize) solid var(--sliderThumbBorderColor);
  background-color: var(--sliderThumbBackgroundColor);
  cursor: pointer;
  z-index: 6;
}

.rux-range::-webkit-slider-thumb:hover {
  border-color: var(--sliderHoverThumbBorderColor);
  background-color: var(--sliderHoverThumbBackgroundColor);
}

.rux-range:disabled::-webkit-slider-runnable-track {
  opacity: var(--disabledOpacity);
  cursor: var(--disabledCursor);
}

.rux-range:disabled::-webkit-slider-thumb {
  cursor: var(--disabledCursor);
}

.rux-range:disabled::-webkit-slider-thumb:hover {
  border-color: var(--sliderThumbBorderColor);
}

.rux-range:not(:disabled)::-webkit-slider-thumb:active {
  border-color: var(--sliderSelectedThumbBorderColor);
  background-color: var(--backgroundColor);
}

.rux-range:not(:disabled)::-webkit-slider-thumb:focus,
.rux-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active) {
  background-color: var(--sliderHoverThumbBackgroundColor);
}

.rux-range:not(:disabled)::-webkit-slider-thumb:active {
  border-color: var(--sliderSelectedThumbBorderColor);
  background-color: var(--backgroundColor);
}

.rux-range:not(:disabled)::-webkit-slider-thumb:focus,
.rux-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active) {
  background-color: var(--sliderHoverThumbBackgroundColor);
}

/* Thumb -> Moz */
.rux-range::-moz-range-thumb {
  -moz-appearance: none;
  position: relative;
  top: var(--top);
  height: var(--sliderThumbSize);
  width: var(--sliderThumbSize);
  border-radius: 100%;
  border: var(--sliderThumbBorderSize) solid var(--sliderThumbBorderColor);
  background-color: var(--sliderThumbBackgroundColor);
  cursor: pointer;
}

.rux-range:not(:disabled)::-moz-range-thumb:active {
  border-color: var(--sliderSelectedThumbBorderColor);
  background-color: var(--backgroundColor);
}

.rux-range::-moz-range-thumb:hover {
  border-color: var(--sliderHoverThumbBorderColor);
}

input:-moz-focusring {
  outline: none;
}

.rux-range:disabled::-moz-range-thumb {
  opacity: var(--disabledOpacity, 0.4);
  cursor: var(--disabledCursor);
}

/* Thumb -> Ms */
.rux-range::-ms-thumb {
  position: relative;
  top: var(--top);
  height: var(--sliderThumbSize);
  width: var(--sliderThumbSize);
  border-radius: 100%;
  border: var(--sliderThumbBorderSize) solid var(--sliderThumbBorderColor);
  background-color: var(--sliderThumbBackgroundColor);
  cursor: pointer;
  z-index: 6;
}

.rux-range:disabled::-ms-thumb {
  opacity: 0.4;
  cursor: not-allowed;
}