@import "../variables";
@import "../palette";

.slider-input {
  position: relative;
  &__range {
    position: relative;
    width: 100%;
    vertical-align: middle;
    -webkit-appearance: none;
  }
  &__text {
    color: $selected-text;
    padding: 0 0.5em;
  }
  &__inputs {
    position: relative;
  }
  input.slider-input__manual {
    transition: opacity $global-transition-duration;
    opacity: 0;
    position: absolute;
    top: -2rem;
    left: 0rem;
    width: auto;
    &:focus {
      opacity: 1;
    }
  }
  input[type=range] {
    background: transparent;
    &:focus {
      outline: none;
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      outline: none;
      width: 1em;
      height: 1em;
      background: $panel-heading-color;
      @include border;
      border-radius: 0;
      cursor: col-resize;
      margin-top: -0.5em;
      position: relative;
      top: 1px;
      outline: 1px solid $brand-color;
      outline-offset: -5px;
    }
    &::-webkit-slider-runnable-track {
      background: transparent;
      height: 4px;
      @include border($panel-border-color);
      border-radius: 0;
    }
  }
  &:hover,&:focus {
    .slider-input__manual {
      opacity: 0.6;
    }
  }
}