@use 'sass:math';
@use './vars' as *;
@use '@cfpb/cfpb-design-system/src/abstracts' as *;

/*
    Range slider for credit score
    --------------------------- */
.a-range {
  position: relative;
  margin-bottom: 1.5em;

  &__labels {
    margin: (math.div(15px, $base-font-size-px) + em) 0
      (math.div(8px, $base-font-size-px) + em);
    font-size: 0.625em;
    line-height: 0;

    &-max {
      float: right;
    }
  }

  &__text {
    position: absolute;
    display: block;
    margin-left: math.div(-10px, $base-font-size-px) + em;
    font-size: 0.875em;
    white-space: nowrap;
    text-align: center;
  }
}

// .rangeslider comes from rangeslider-js and is not getBEM.com style BEM.
.rangeslider {
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  background: transparent url('#{$image-path}/slider-bg.png') scroll no-repeat
    center center;
  background-size: 100%;
}

.rangeslider__fill {
  position: absolute;
  top: 0;
  background: #0f0;
}

.rangeslider__handle {
  position: absolute;
  top: 12px;
  display: inline-block;
  width: 22px;
  height: 21px;
  border: 0;
  background: transparent url('#{$image-path}/slider-handle.png') no-repeat 0 0;
  background-size: 100%;

  &.warning {
    width: 22px;
    height: 21px;
    background: transparent url('#{$image-path}/slider-handle.png') no-repeat 0
      100%;
    background-size: 100%;
  }
}

.a-range__input:focus + .rangeslider .rangeslider__handle {
  border: 1px solid #0072ce;
  box-shadow: none;
  outline: 1px solid #0072ce;
  outline-offset: 0;
}

@media (min-resolution: 192dpi) {
  .rangeslider__handle {
    width: 22px;
    height: 21px;
    border: 0;
    background: transparent url('#{$image-path}/slider-handle@2x.png') no-repeat
      0 0;
    background-size: 100%;

    &.warning {
      width: 22px;
      height: 21px;
      background: transparent url('#{$image-path}/slider-handle@2x.png')
        no-repeat 0 100%;
      background-size: 100%;
    }
  }
}

@media print {
  .rangeslider,
  .a-range__labels {
    display: none;
  }
}
