
.filter__item--confidence {
  text-align: left;
  transition: border 0.2s ease;
  background: palette(white);
  &:hover,
  &:focus {
    border: 2px solid palette(purple);
    background: palette(white);
    transition: border 0.2s ease, background 0.2s ease;
  }
  &:after {
    content: '';
    border-color: palette(grey, dark);
    border-style: solid;
    border-width: 1px 1px 0 0;
    display: inline-block;
    height: 8px;
    width: 8px;
    transform: translateY(-50%) rotate(133deg);
    transition: all 1.5s ease;
    position: absolute;
    right: 1em;
    top: 50%;
    pointer-events: none;
  }
  .filter__buttons, .button-clear {
      display: none;
  }
  .confidence-content {
    width: 100%;
    padding-right: 0.8em;
    padding-left: 0.8em;
  }
  .range__container {
    margin-top: -8px;
    padding: 0 0.5em;
    // margin-right: -0.5em;
    // margin-left: -0.5em;
  }
  .range {
    @include font-size(14px);
    text-align: center;
    display: none;
  }
  ::v-deep svg {
    margin-top: 5px;
    height: 30px !important;
    max-width: 90%;
  }
  &.expanded {
    margin-top: 10px;
    position: absolute;
    background: palette(white);
    padding: 0.8em 0.8em 0 0.8em;
    min-height: auto;
    height: auto;
    min-height: auto;
    transition: height 0.1s ease-in-out;
    overflow: visible;
    border-radius: 2px;
    z-index: 4;
    width: 400px;
    max-width: 100vw;
    min-height: 210px;
    border: 2px solid palette(purple);
    // right: 0;
    pointer-events: all;
    &:after {
        content: none;
    }
    .confidence {
      ::v-deep svg {
        max-width: 100%;
        height: 100px !important;
      }
    }
    .filter__buttons {
        margin-top: 2em;
        display: block;
    }
    .range {
        display: block;
    }
    // .range--start,
    // .range--end {
    //     display: none;
    // }
    .range__container {
        pointer-events: visible;
    }
    // .vue-slider-component {
    //     opacity: 1;
    // }
    // .clear {
    //     height: 0px;
    // }
    .label-default {
        display: block;
    }
  }
}
  // .--active {
  //     .filter__item--confidence:not(.expanded) {
  //         text-align: center;
  //         display: flex;
  //         .confidence,
  //         .range__container {
  //             display: none;
  //         }
  //         .range {
  //             display: block;
  //             background: none;
  //             padding: 0.8em;
  //             border: 0;
  //             min-height: auto;
  //             margin: auto;
  //             pointer-events: none;
  //         }
  //     }
  // }



::v-deep .marks {
  .background {
    stroke: none !important;
  }
  line {
    stroke: none !important;
  }
  .role-axis {
    display: none !important;
  }
  .role-legend {
    display: none !important;
  }
  text {
    font-weight: normal !important;
    font-family: $ff !important;
  }
}
