@use '../config' as *;

.noUi-target {
  color: $form-range-thumb-bg;
  background: none;
  border: 0;
  box-shadow: none;
  @include border-radius(0);
}

.noUi-horizontal {
  height: add($form-range-track-height, 1rem);
  padding: 0.5rem 0;
}

.noUi-base {
  background: $form-range-track-bg;
  @include border-radius($form-range-track-border-radius);
}

.noUi-handle {
  width: $form-range-thumb-width;
  height: $form-range-thumb-height;
  background: currentColor;
  border: $form-range-thumb-border;
  outline: 0;
  box-shadow: $form-range-thumb-box-shadow;
  @include border-radius($form-range-thumb-border-radius);

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

  .noUi-horizontal & {
    inset-inline-end: calc($form-range-thumb-height * -0.5);
    top: calc($form-range-thumb-height * -0.5);
    width: $form-range-thumb-width;
    height: $form-range-thumb-height;
    margin-block: 1px 0;
    margin-inline: 0 1px;
  }

  &.noUi-active,
  &:focus {
    box-shadow: $form-range-thumb-focus-box-shadow;
  }
}

.noUi-connect {
  background: currentColor;
}