input[type='range'] {
  height: 48px;
  -webkit-appearance: none;
  width: 100% !important;
  margin: 0;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 16px;
    background: var(--Bg1);
    border-radius: 2px;
    cursor: pointer;
    animate: 0.2s;
  }

  &::-webkit-slider-thumb {
    height: 40px;
    width: 12px;
    background: #fff;
    border: 4px solid var(--Main2);
    border-top: 10px solid var(--Main2);
    border-bottom: 10px solid var(--Main2);
    box-shadow: 0px 2px 10px rgba(57, 52, 66, 0.1);
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -12px;
    position: relative;
  }

  &:disabled {
    pointer-events: none;

    &::-webkit-slider-thumb {
      background: var(--Stroke);
      cursor: default !important;
    }

    &::-moz-range-thumb {
      background: var(--Stroke);
      cursor: default !important;
    }

    ::-ms-thumb {
      background: var(--Stroke);
      cursor: default !important;
    }
  }

  &::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    background: var(--Stroke);
    border-radius: 4px;
  }
}

input[type='range'] input[type='range'] input[type='range']::-moz-range-thumb {
  height: 30px;
  width: 15px;
  border-radius: 4px;
  background: var(--Main2);
  cursor: pointer;
}

input[type='range']:disabled input[type='range']::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type='range']::-ms-fill-lower {
  background: var(--Stroke);
  border-radius: 10px;
}

input[type='range']::-ms-fill-upper {
  background: var(--Stroke);
  border-radius: 10px;
}

input[type='range']::-ms-thumb {
  margin-top: 1px;
  height: 30px;
  width: 15px;
  border-radius: 4px;
  background: var(--Main2);
  cursor: pointer;
}

input[type='range']:focus::-ms-fill-lower {
  background: var(--Stroke);
}

input[type='range']:focus::-ms-fill-upper {
  background: var(--Stroke);
}