@each $color, $value in $theme-colors {
  .noUi-#{$color} {
    .noUi-connect {
      background: $value !important;
    }
  }
}

.noUi-primary-lighter {
  .noUi-connect {
    background: var(--#{$prefix}primary-lighter) !important;
  }
}

.noUi-target {
  --#{$prefix}noUi-track-height: 0.75rem;
  --#{$prefix}noUi-handle-top: -6px;
  background: var(--#{$prefix}body-highlight-bg);
  border: none;
  box-shadow: var(--#{$prefix}box-shadow-inset);

  &.noUi-target-primary {
    background: var(--#{$prefix}primary-lighter);
    [data-bs-theme='dark'] & {
      background: var(--#{$prefix}primary-bg-subtle);
    }
  }

  &.noUi-horizontal {
    height: var(--#{$prefix}noUi-track-height);

    .noUi-handle {
      right: -8px;
    }
  }

  .noUi-connect {
    background: var(--#{$prefix}primary);
  }

  .noUi-handle {
    width: 1rem;
    height: 1.5rem;
    background: $white;
    box-shadow: none;
    border: 1px solid var(--#{$prefix}border-color);
    top: var(--#{$prefix}noUi-handle-top);
    cursor: grab;

    &:hover {
      .noUi-tooltip {
        display: block;
      }
    }

    &::after,
    &::before {
      background: var(--#{$prefix}secondary-light);
      height: 10px;
      top: 6px;
    }
    &::after {
      left: 9px;
    }
    &::before {
      left: 4px;
    }

    .noUi-tooltip {
      display: none;
      background: var(--#{$prefix}emphasis-bg);
      border: 1px solid var(--#{$prefix}border-color);
      color: var(--#{$prefix}body-color);
      font-size: $tooltip-font-size;
    }

    &:active {
      cursor: grabbing;
    }

    &.noUi-active {
      .noUi-tooltip {
        display: block;
      }
    }
  }

  .noUi-pips {
    color: var(--#{$prefix}body-quaternary);
    margin-top: map-get($spacers, 1);
    .noUi-value-sub {
      color: var(--#{$prefix}body-quaternary);
    }
    .noUi-marker,
    .noUi-marker-large {
      background: var(--#{$prefix}body-quaternary);
    }
  }
}

.noUi-handle-square {
  &.noUi-target {
    --#{$prefix}noUi-handle-top: -2px;
    .noUi-handle {
      height: 16px;
      width: 16px;

      &::after,
      &::before {
        display: none;
      }
    }
  }
}

.noUi-handle-circle {
  &.noUi-target {
    --#{$prefix}noUi-handle-top: -3px;
    .noUi-handle {
      height: 18px;
      width: 18px;

      border-radius: 50%;
      &::after,
      &::before {
        display: none;
      }
    }
  }
}

.noUi-slider-slim {
  &.noUi-target {
    --#{$prefix}noUi-track-height: 4px;
    --#{$prefix}noUi-handle-top: -10px;
    &.noUi-handle-circle {
      --#{$prefix}noUi-handle-top: -7px;
    }
  }
}

.noUi-slider-medium {
  &.noUi-target {
    --#{$prefix}noUi-track-height: 14px;
    --#{$prefix}noUi-handle-top: -5px !important;
    // background: var(--#{$prefix}body-highlight-bg) !important;
    border-radius: 1.25rem;
    .noUi-handle {
      height: 1.5rem;
      width: 1.5rem;
    }
    .noUi-connects {
      height: 6px;
      top: 30%;
    }
  }
}

.noUi-slider-large {
  &.noUi-target {
    --#{$prefix}noUi-track-height: 2.5rem;
    --#{$prefix}noUi-handle-top: 3.5px !important;
    background: var(--#{$prefix}body-highlight-bg);
    border-radius: 1.25rem;
    .noUi-handle {
      height: 2rem;
      width: 2rem;
      box-shadow: none;
      border: none;
    }
    .noUi-connects {
      height: 1.5rem;
      top: 20%;
    }
  }
}

.noUi-handle-primary {
  .noUi-handle {
    background-color: var(--#{$prefix}primary);
    box-shadow: none;
    border: none;
  }
}
// .range-slider-primary {
//   &.noUi-target {
//     background: var(--#{$prefix}primary-lighter);
//     [data-bs-theme='dark'] & {
//       background: var(--#{$prefix}primary-bg-subtle);
//     }
//   }
// }