@import "../../styles/config";

.hana-slider{
  background: $normal-color;
  height: $slider-size-middle;
  border-radius: 5px;
  position: relative;
  font-size: 12px;
  margin-top: 20px;

  &-small {
    height: $slider-size-small;
  }

  &-large {
    height: $slider-size-large;
  }

  &-inner{
    background: $primary-color;
    height: inherit;
    border-radius: inherit;
    position: relative;
  }

  &-button{
    position: absolute;
    right: -11px;
    top: -5px;
    background-color: darken($primary-color, 20%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;

    &:hover{
      background-color: darken($primary-color, 30%);
    }
  }

  &-value{
    user-select: none;
    position: absolute;
    right: -11px;
    top: -20px;
    color: $primary-color
  }

  &-icon-wrap{
    position: absolute;
    right: 0;
    top: $slider-size-middle * 0.5;
    transform: translate(50%, -50%);
    cursor: pointer;
    color: darken($primary-color, 20%);

    .hanaicon {
      color: inherit;
      font-size: 24px;
    }
  }

  &-small &-icon-wrap{
    top: $slider-size-small * 0.5;
    .hanaicon{
      font-size: 20px;
    }
  }

  &-large &-icon-wrap{
    top: $slider-size-large * 0.5;
    .hanaicon{
      font-size: 30px;
    }
  }
}