/* SPDX-License-Identifier: Apache-2.0 */
#container {
  --slider-color: var(--text-color);
  --slider-disabled-color: var(--text-color-grad2);
  --slider-highlight-color: var(--bkg-color-grad2);
  /* length of input slider including the thumb */
  --slider-width: 170px;
  /* Length of the slider track */
  --track-width: calc(var(--slider-width) - var(--thumb-width));
  --thumb-width: 19px;
  --margin-left: calc(var(--thumb-width) / 2);
  --slider-track-height: 9px;
  /* Thumb must move down have its radius and center align with the track */
  --thumb-margin-top: calc(-0.5 * var(--thumb-width) + 0.5 * var(--slider-track-height));
  --slider-track-border-color: var(--text-color-grad2);
  --slider-track-outside-color: var(--bkg-color-grad2);
  --slider-track-inside-color: var(--text-color);

  color: var(--text-color);
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0 0 0.5rem;
}

/* Chrome & Edge overwrites: Overwrite browser defaults for  range input element */
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: var(--thumb-width);
  height: var(--thumb-width);
  margin-top: var(--thumb-margin-top);
  background: var(--slider-color);
  border: 1px solid var(--slider-highlight-color);
  border-radius: 50%;
  box-shadow: 1px 1px 2px #9c9c9c;
  cursor: pointer;
}

input[type='range']::-webkit-slider-thumb:hover {
  box-shadow:
    inset 0 0 2px 0 var(--slider-highlight-color),
    0 0 4px var(--slider-highlight-color);
  border-color: var(--bkg-color);
}

input[type='range']::-webkit-slider-thumb:active {
  box-shadow:
    inset 0 0 2px 0 var(--slider-highlight-color),
    0 0 4px var(--slider-highlight-color);
  -webkit-box-shadow:
    inset 0 0 2px 0 var(--slider-highlight-color),
    0 0 4px var(--slider-highlight-color);
  border-color: var(--bkg-color);
}

input[type='range']::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
}

/* End of Chrome & Edge rules */

/* Firefox overwrites: Overwrite browser defaults for  range input element */
input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: var(--thumb-width);
  height: var(--thumb-width);
  margin-top: var(--thumb-margin-top);
  background: var(--slider-color);
  border: 1px solid var(--slider-highlight-color);
  border-radius: 50%;
  cursor: pointer;
}

input[type='range']::-moz-range-thumb:hover {
  box-shadow:
    inset 0 0 2px 0 var(--slider-highlight-color),
    0 0 4px var(--slider-highlight-color);
  border-color: var(--bkg-color);
}

input[type='range']::-moz-range-thumb:active {
  box-shadow:
    inset 0 0 2px 0 var(--slider-highlight-color),
    0 0 4px var(--slider-highlight-color);
  -webkit-box-shadow:
    inset 0 0 2px 0 var(--slider-highlight-color),
    0 0 4px var(--slider-highlight-color);
  border-color: var(--bkg-color);
}

input[type='range']::-moz-range-track {
  height: var(--slider-track-height);
}

/* end of Firefox rules */

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--slider-track-height);
  width: var(--slider-width);
  background-color: transparent;
  pointer-events: none;
  z-index: 2;
  margin: 0;
}

#input-upper {
  position: absolute;
}

#slider-track {
  width: var(--track-width);
  margin-left: var(--margin-left);
  height: var(--slider-track-height);
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  z-index: 0;
  border: 1px solid var(--slider-track-border-color);
  border-radius: 3px;
}

.slider-label {
  width: var(--track-width);
  margin: calc(0.25 * var(--thumb-width)) 0 0 var(--margin-left);
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 1em;
  /* Necessary for alignment */
  border: 1px solid transparent;
}

.slider-label.editable {
  margin-top: calc(0.5 * var(--thumb-width));
  margin-bottom: 0.3rem;
}

.slider-label > input {
  line-height: 1em;
  text-align: center;
  padding: 0;
  max-width: 80px;
}

/* Remove input spinners in Chrome, Safari, Edge, Opera */
.slider-label > input::-webkit-outer-spin-button,
.slider-label > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove input spinners for Firefox */
.slider-label > input[type='number'] {
  -moz-appearance: textfield;
}

/* Remove input style if labels can't be edited */
.slider-label > input:disabled {
  border-color: transparent;
}

.slider-label > input:disabled:hover {
  background-color: initial;
  cursor: default;
}

.slider-label > div {
  margin: 0 2px;
}