.md-slider-wrapper {
  --local-background-track-color: var(--mds-color-theme-control-indicator-inactive-normal);
  --local-background-active-track-color: var(--mds-color-theme-control-active-normal);
  --local-track-height: 0.125rem;
  --local-thumb-size: 1rem;
  --local-value: 0%;

  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--local-track-height);
  background: linear-gradient(
    left,
    var(--local-background-active-track-color),
    var(--local-background-active-track-color) var(--local-value),
    var(--local-background-track-color) var(--local-value),
    var(--local-background-track-color) 100%
  );
  background: -webkit-linear-gradient(
    left,
    var(--local-background-active-track-color),
    var(--local-background-active-track-color) var(--local-value),
    var(--local-background-track-color) var(--local-value),
    var(--local-background-track-color) 100%
  );
}

.md-slider-wrapper:disabled {
  /* tokens not matching Figma, since there is an issue with the tokens atm */
  --local-background-track-color: var(--mds-color-theme-control-inactive-normal);
  --local-background-active-track-color: var(--mds-color-theme-control-inactive-pressed);
}

.md-slider-wrapper:focus {
  box-shadow: none !important;
}

/* THUMB: */
.md-slider-wrapper::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1px solid var(--mds-color-theme-outline-primary-normal);
  background: var(--mds-color-theme-background-solid-primary-normal);
  height: var(--local-thumb-size);
  width: var(--local-thumb-size);
  cursor: pointer;
}

.md-slider-wrapper::-webkit-slider-thumb:hover {
  background: var(--mds-color-theme-background-solid-secondary-normal);
}

.md-slider-wrapper::-webkit-slider-thumb:active {
  background: var(--mds-color-theme-background-solid-tertiary-normal);
}

.md-slider-wrapper:disabled::-webkit-slider-thumb {
  background: var(--mds-color-theme-background-solid-tertiary-normal);
  border: 1px solid var(--mds-color-theme-background-solid-tertiary-normal);
  cursor: default;
}

.md-slider-wrapper:focus::-webkit-slider-thumb {
  box-shadow: var(--md-globals-focus-ring-box-shadow);
}

/** THUMB: FF */
.md-slider-wrapper::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1px solid var(--mds-color-theme-outline-primary-normal);
  background: var(--mds-color-theme-background-solid-primary-normal);
  height: var(--local-thumb-size);
  width: var(--local-thumb-size);
  cursor: pointer;
}

.md-slider-wrapper::-moz-range-thumb:hover {
  background: var(--mds-color-theme-background-solid-secondary-normal);
}

.md-slider-wrapper::-moz-range-thumb:active {
  background: var(--mds-color-theme-background-solid-tertiary-normal);
}

.md-slider-wrapper:disabled::-moz-range-thumb {
  background: var(--mds-color-theme-background-solid-tertiary-normal);
  border: 1px solid var(--mds-color-theme-background-solid-tertiary-normal);
  cursor: default;
}

.md-slider-wrapper:focus::-moz-range-thumb {
  box-shadow: var(--md-globals-focus-ring-box-shadow);
}