@import "~rc-slider/assets/index.css";
@import "../vars.scss";

.sk-range-filter {

  &__header {
    margin-bottom: 5px;
    font-weight: $sk-bold-weight;
    font-size: $sk-heading-font-size;
  }

  &.is-disabled {
    display:none;
  }

  &.is-no-histogram .bar-chart {
    margin-top:15px;
  }

  &-value-labels {
    display:flex;
    justify-content: space-between;
    margin-top:5px;

    &__min {
      align-self: flex-start;
      font-size:$sk-list-secondary-font-size;
    }
    &__max {
      align-self: flex-end;
      font-size:$sk-list-secondary-font-size;
    }
  }

}

.bar-chart {
  height:50px;
  flex-flow: row nowrap;
  justify-content: space-around;
  display:flex;
  align-items: flex-end;

  &__bar {
    background:rgba(156,162,153,0.5);
    flex:1;

    &.is-out-of-bounds {
      background:rgba(156,162,153,0.3);
    }
  }



}