@import 'Variables';
@mixin coveoSlider {
  .coveo-slider-container {
    -ms-touch-action: none;
    touch-action: none;

    width: 100%;
    height: 85px;
    position: relative;
    padding: 25px 20px 20px;
    & > div {
      height: 50px;
      position: relative;
    }
    svg {
      overflow: hidden;
    }
  }
  .coveo-slider-line {
    background-color: white;
    @include defaultRoundedBorder();
    position: absolute;
    width: 100%;
    height: 10px;
    top: 3px;
    &.coveo-active {
      z-index: 1;
      background-color: $color-blueish-gray;
    }
  }
  .coveo-slider-button {
    background-color: $color-teal;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    width: 15px;
    height: 16px;
    z-index: 2;
    position: absolute;
    margin-left: -7px;
    &:hover {
      background-color: $color-teal;
    }
    &.coveo-active {
      background-color: $color-teal;
    }
    &:after {
      content: '';
      height: 10px;
      width: 2px;
      border-right: 1px solid white;
      border-left: 1px solid white;
      position: absolute;
      right: 4px;
      top: 3px;
    }
    &:before {
      content: '';
      height: 10px;
      border-right: 1px solid white;
      position: absolute;
      left: 4px;
      top: 3px;
    }
  }
  .coveo-slider-caption {
    position: absolute;
    top: 25px;
    left: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .coveo-slider-tooltip {
    white-space: nowrap;
    padding: 10px;
    background-color: $color-blueish-white-grey;
    @include defaultRoundedBorder();
    z-index: 10;
    position: absolute;
    margin-top: 30px;
    .coveo-slider-tooltip-arrow {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid $color-light-grey;
      top: 38px;
      position: absolute;
    }
    .coveo-caption {
      font-size: $font-size-smallest;
    }
    .coveo-count {
      font-size: $font-size-smallest;
      margin-left: 5px;
    }
  }
  .coveo-slider-container.coveo-with-graph {
    height: 135px;
    & > div {
      height: 100px;
    }
    svg {
      position: absolute;
      left: 0;
      top: -5px;
      .coveo-bar {
        fill: $color-blueish-gray;
        shape-rendering: crispEdges;
        &.coveo-active {
          fill: $color-teal;
        }
      }
      .coveo-bar:hover {
        fill: $color-greyish-dark-blue;
        cursor: pointer;
      }
    }
    .coveo-slider-line {
      top: 60px;
    }
    .coveo-slider-button {
      top: 57px;
    }
    .coveo-slider-caption {
      top: 80px;
    }
  }
}
