@import "./../../styles/color";
@import "./../../styles/sizes";
@import "./../../styles/flex";

.one-ui-range-slider{
  $root: &;
  width: 100%;
  height: 32px;

  @include setMargin();
  @include setFlex();

  &__track{
    background-color: color(teal);
    min-height: 6px;
    border-radius: 6px;
    margin-top: 13px;
  }


  &__thumb{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);;
    &:focus{
      outline: none;
    }
    &--active{
      #{$root}__tooltip{
        opacity: 1;
        transform: translate3d(0,0,0);
      }
    }
  }
  &__tooltip{
    top: -32px;
    padding: 4px 8px;
    background-color: color(dark,1,.9);
    color: color(white);
    border-radius: 4px;
    opacity: 0;
    transform: translate3d(0,8px,0);
    position: absolute;
    margin: 0 auto;
    transition:
            transform .3s cubic-bezier(0.01, 0.63, 0.02, 1),
            opacity 0.03s ease-in;
  }
}