@import '../_core-mixin';
@import '../field/_field-mixin';

// @stable [16.10.2020]
@mixin rac-slider (
  $rac-slider-custom: unset,
  /**/
  $rac-slider-connect-background: unset,
  $rac-slider-fields-wrapper-base-text-field-self-field-background: unset,
  $rac-slider-fields-wrapper-base-text-field-self-field-input-text-align: unset,
  $rac-slider-fields-wrapper-base-text-field-width: unset,
  $rac-slider-fields-wrapper-display: unset,
  $rac-slider-fields-wrapper-flex-direction: unset,
  $rac-slider-fields-wrapper-neighbor-child-margin: unset,
  $rac-slider-handle-background: unset,
  $rac-slider-handle-before-after-content: unset,
  $rac-slider-handle-border-radius: unset,
  $rac-slider-handle-border: unset,
  $rac-slider-handle-box-shadow: unset,
  $rac-slider-horizontal-handle-cursor: unset,
  $rac-slider-horizontal-handle-height: unset,
  $rac-slider-horizontal-handle-right: unset,
  $rac-slider-horizontal-handle-top: unset,
  $rac-slider-horizontal-handle-width: unset,
  $rac-slider-horizontal-height: unset,
  $rac-slider-horizontal-margin: unset,
  $rac-slider-horizontal-width: unset,
  $rac-slider-target-background: unset,
  $rac-slider-target-border-radius: unset,
  $rac-slider-target-border: unset,
  $rac-slider-target-box-shadow: unset,
  $rac-slider-vertical-height: unset,
  $rac-slider-vertical-margin: unset,
  $rac-slider-vertical-width: unset
) {
  #{rac-cls(rac-slider, $rac-slider-custom)} {
    > {
      .rac-slider__fields-wrapper {
        @include rac-styles (
          $rac-styles-display: $rac-slider-fields-wrapper-display,
          $rac-styles-flex-direction: $rac-slider-fields-wrapper-flex-direction
        );

        > {
          @include rac-field (
            $rac-field-custom: $rac-base-text-field-cls,
            $rac-field-width: $rac-slider-fields-wrapper-base-text-field-width,
            $rac-self-field-background: $rac-slider-fields-wrapper-base-text-field-self-field-background,
            $rac-self-field-input-text-align: $rac-slider-fields-wrapper-base-text-field-self-field-input-text-align
          );
        }

        @include rac-neighbor-child (
          $rac-neighbor-child-margin: $rac-slider-fields-wrapper-neighbor-child-margin
        );
      }
    }

    @include rac-styles (
      $rac-styles-custom: noUi-target,
      $rac-styles-background: $rac-slider-target-background,
      $rac-styles-border-radius: $rac-slider-target-border-radius,
      $rac-styles-border: $rac-slider-target-border,
      $rac-styles-box-shadow: $rac-slider-target-box-shadow
    );

    @include rac-styles (
      $rac-styles-custom: noUi-connect,
      $rac-styles-background: $rac-slider-connect-background
    );

    .noUi-handle {
      @include rac-styles (
        $rac-styles-background: $rac-slider-handle-background,
        $rac-styles-border-radius: $rac-slider-handle-border-radius,
        $rac-styles-border: $rac-slider-handle-border,
        $rac-styles-box-shadow: $rac-slider-handle-box-shadow
      );

      &:before,
      &:after {
        @include rac-styles (
          $rac-styles-content: $rac-slider-handle-before-after-content
        );
      }
    }

    .noUi-horizontal {
      @include rac-styles (
        $rac-styles-height: $rac-slider-horizontal-height,
        $rac-styles-margin: $rac-slider-horizontal-margin,
        $rac-styles-width: $rac-slider-horizontal-width
      );

      @include rac-styles (
        $rac-styles-custom: noUi-handle,
        $rac-styles-cursor: $rac-slider-horizontal-handle-cursor,
        $rac-styles-height: $rac-slider-horizontal-handle-height,
        $rac-styles-right: $rac-slider-horizontal-handle-right,
        $rac-styles-top: $rac-slider-horizontal-handle-top,
        $rac-styles-width: $rac-slider-horizontal-handle-width
      );
    }

    .noUi-vertical {
      @include rac-styles (
        $rac-styles-height: $rac-slider-vertical-height,
        $rac-styles-margin: $rac-slider-vertical-margin,
        $rac-styles-width: $rac-slider-vertical-width
      );
    }
  }
}