.c-range-input {
  width: 100%;

  &__slider {
    appearance: none;
    width: 100%;
    background: map-get($grey, 40);
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
    height: 2px;

    &:hover {
      opacity: 1;
    }

    &::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: $white;
      border: 6px solid map-get($orange, 1);
      border-radius: 50%;
      cursor: pointer;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      background: $white;
      border: 6px solid map-get($orange, 1);
      border-radius: 50%;
      cursor: pointer;
    }

    &[disabled]::-moz-range-thumb {
      border: 6px solid rgba(map-get($dark-blue, 1), 0.3);
    }

    &[disabled]::-webkit-slider-thumb {
      border: 6px solid rgba(map-get($dark-blue, 1), 0.3);
    }
  }

  &__label {
    font-size: $fs-small;
    margin-bottom: 8px;
    display: block;
    font-family: inherit !important;
  }

  &__border-labels {
    display: flex;
    justify-content: space-between;
    font-size: $fs-tiny;
    cursor: default;
  }
  &__value {
    font-size: $fs-small;
    text-align: center;
    margin-top: 9px;
    cursor: default;
  }

  &__validation {
    display: block;
    margin-top: 8px;
    font-size: $fs-tiny;
    color: map-get($red, 1);
    font-family: inherit !important;
  }
}
