.rangeslider,
.rangeslider__fill {
  display: block;
  border-radius: 10px;
}

.rangeslider {
  background: #DCE0E3;
  position: relative;

  &--horizontal {
    height: 8px;
    width: 100%;
    align-self: center;

    .rangeslider__fill {
      top: 0;
      height: 100%;
    }

    .rangeslider__handle {
      top: -6px;
      touch-action: pan-y;
      -ms-touch-action: pan-y;

      &__value {
        transition: background-color .2s,
                    box-shadow .1s,
                    transform .1s;
        box-sizing: border-box;
        min-width: 36px;
        height: 24px;
        padding: 1px 10px 0;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        background-color: $c1-main;
        border-radius: 50px;
        color: white;
        left: 50%;
        transform: translateX(-50%);
        top: 32px;
        position: absolute;
        white-space: nowrap;
        border-bottom: 1px solid darken($c1-main, 10%);

        &:before {
          transition: border-top-color .2s;
          position: absolute;
          bottom: 22px;
          left: calc(50% - 10px);
          content: "";
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 9px solid $c1-main;
        }

        /* &:after {
          content: " cm";
        } */
      }
    }
  }

  &--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%;

    .rangeslider__fill {
      bottom: 0;
      width: 100%;
    }

    .rangeslider__handle {
      left: -10px;
      touch-action: pan-x;
      -ms-touch-action: pan-x;
    }
  }

  &--disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: 0.4;
  }

  &__fill {
    background: $c1-main;
    position: absolute;
  }

  &__handle {
    background: white;
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    background: $c2-main;
    border-radius: 50%;
    box-shadow: 0px -1px 2px 1px rgba(255, 255, 255, 0.6);

    &:after {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: white;
      border-radius: 50%;
    }

    &:active,
    .rangeslider--active & {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    }

    input[type="range"]:focus + & {
      box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    }
  }

  &__min {
      height: 8px;
      align-self: center;
      background: $c2-main;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      + .rangeslider,
      + .rangeslider .rangeslider__fill {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
  }
}