@mixin nouislider-variant($parent, $background) {
  #{$parent}.noUi-target {
    // If slider is not disabled
    &:not([disabled]) {
      background: rgba($background, 0.16);
      .noUi-connect {
        background: $background;
      }

      .noUi-handle {
        border-color: $background;
        &:hover {
          box-shadow: 0 0 0 8px rgba($background, 0.16);
        }
        &:active,
        &:focus {
          box-shadow: 0 0 0 13px rgba($background, 0.16);
        }
      }
    }
  }
}

@mixin nouislider-theme($background) {
  @include nouislider-variant('', $background);
}