html {
  height: 100%;
  padding: 0;
}
body {
  margin: 0;
  color: rgb(90,90,90);
  font-family: 'Varela Round', sans-serif;
  
  height: 100%;
  background-color: white;
  background-image: linear-gradient(rgb(90,110,200), white, rgb(90,110,200));
  background-repeat: no-repeat;
  backgorund-size: 50% 100%;
  background-position: 50% 50%;
}

h1 {
  text-align: center;
  white-space: nowrap;
  margin: 0 25%;
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50%;
  text-align: center;
  transform: translateY(-50%);
 
  span {
    display: flex;
    height: 3em;

    
    justify-content: center;
    align-items: center;
    vertical-align: top;
    > * {
      flex-shrink: 0;
    }
    &:first-child > input {
      margin-left: .5em;
    }
    &:last-child > input {
      margin-right: .5em;
    }
  }
}

input[type='range'][orient='circular'] {
  $step: 12;
  $background: white;
  $foreground: currentColor;
  
  $size: 3em;
  @include -range__reset;
  
  
  height: $size;
  width: $size;
  line-height: 3em;
  display: inline-block;
  background: {
    color: $foreground;
  }
  transform-origin: 50% 50%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 ( $size / (100 / 3) ) $foreground;

  &:hover, &:active, &:focus:hover, &:focus:active {
    box-shadow: 0 0 0 ( $size / (100 / 3) ) $background,
       0 0 0 ( $size / (100 / 10) ) $foreground,
       inset 0 0 0 ( $size / (100 / 3) ) $foreground;

  }

  &:focus {
    box-shadow: 0 0 0 ( $size / (100 / 3) ) $background,
       0 0 0 ( $size / (100 / 6) ) $foreground,
       inset 0 0 0 ( $size / (100 / 3) ) $foreground;

  }

  box-sizing: border-box;
  transform-origin: 50% 50%;
  transform: rotate( -45deg);
  
  @for $i from 0 through $step {
    $deg: ( 270 / $step * $i );
//    &[value='#{$i}'],
    &[value='#{$i}'] {
        background-image:
          radial-gradient(
            $foreground 33%,
            transparent 34%
          ),
          linear-gradient(
            #{$deg + 90}deg,
            transparent 50%,
            $background 50%
          ),
          linear-gradient(
            #{$deg - 270 / $step }deg,
            $background 50%,
            transparent 50%
          ),
          linear-gradient(
            #{$deg + 270 / $step}deg,
            transparent 50%,
            $background 50%
          ),
          linear-gradient(
            #{$deg - 90}deg,
            $background 50%,
            transparent 50%
          ),
          radial-gradient(
            $background 49%,
            transparent 50%,
            transparent 64%,
            $background 65%
          );

      color: rgb( 200 - $i *8, 40 + $i*8, 60);
      
      @include -range-track {
        background-position: 0 ( -$size * $i);
      }

    }
  }
  
  @include -range-track{
    //background: white;
    border-radius: 50%;
    box-sizing: border-box;
    background: {
      color: transparent;
      clip: border-box;
      size: $size ($size * ($step + 1) ) ;
      position: 0 50%;
      repeat: no-repeat;
      blend-mode: screen;
      image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/48051/12-rotated-numbers.png');
    }
    height: $size;
    width: $size;
  }
  
  @include -range-thumb {
    border: 0;
    height: ( $size / 3 );
    width: ( $size / 3 );
    background: transparent;
  }
  @include -range-tooltip {
    display: none;
  }
  
}