input {
  &[type='range'] {
    appearance: none;
    width: 100%;
    margin: 1rem 0;

    &:focus {
      outline: none;
    }

    &::-webkit-slider-runnable-track { // sass-lint:disable-line no-vendor-prefixes
      width: 100%;
      height: 1rem;
      cursor: pointer;
      background: var(--color-platinum);
      border-radius: 1rem;
    }

    &::-webkit-slider-thumb { // sass-lint:disable-line no-vendor-prefixes
      height: 2rem;
      width: 2rem;
      border-radius: 50%;
      background-color: var(--primary);
      cursor: pointer;
      border: 0;
      appearance: none;
      margin-top: -0.5rem;
    }
  }
}