.slider-wrapper {
  width: 100%;
  max-width: 280px;

  input[type=range] {
    @mixin track() {
      width: 100%;
      height: 2px;
      cursor: pointer;
      animate: 0.2s;
      box-shadow: 0 none;
    }

    @mixin thumb() {
      width: 14px;
      height: 14px;
      border-radius: 0;
      background: #2c404c;
      cursor: pointer;
      box-shadow: 0 none;
      margin-top: -7px;
      border: 0 none;
      transform: rotate(45deg);

      &:hover {
        background: #3c5462;
      }
    }

    -webkit-appearance: none;
    width: 100%;
    height: 32px;
    background: none;
    margin: 0 0 -7px;
    padding: 0;

    &:focus {
      outline: none;
    }

    &::-webkit-slider-runnable-track {
      @include track();
      background: #1f282d;
      border-radius: 0;
    }

    &::-webkit-slider-thumb {
      @include thumb();
      -webkit-appearance: none;
      margin-top: -10px;
    }

    &::-moz-range-track {
      @include track();
      background: #1f282d;
      border-radius: 0;
    }

    &::-moz-range-thumb {
      @include thumb();
    }

    &::-ms-track {
      @include track();
      background: transparent;
      color: transparent;
    }

    &::-ms-fill-lower {
      background: #2c404c;
      border-radius: 0;
    }

    &::-ms-fill-upper {
      background: #1f282d;
      border-radius: 0;
    }

    &::-ms-thumb {
      @include thumb();
    }
  }

  .slider-label {
    flex: 0 100%;
    font: 11px/11px "Source Sans Pro";
    letter-spacing: 0.03em;
    display: flex;

    span:first-child {
      flex: 0 100%;
    }

    .slider-value {
      color: #c8aa6e;
      flex: 1 0%;
    }
  }
}
