@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// Slider validation message styles
/// @access private
/// @group slider
@mixin slider-validation {
  .#{$prefix}--slider-text-input-wrapper {
    position: relative;
    display: inline-block;
  }

  .#{$prefix}--slider-text-input-wrapper
    .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid,
  .#{$prefix}--slider-text-input-wrapper
    .#{$prefix}--slider-text-input--warn {
    width: 6rem;
    padding-right: 3rem;
    text-align: left;
  }

  .#{$prefix}--slider__invalid-icon {
    position: absolute;
    fill: $support-error;
    // top/transform used to center invalid icon in IE11
    top: 50%;
    right: $spacing-05;
    transform: translateY(-50%);
  }

  .#{$prefix}--slider__invalid-icon.#{$prefix}--slider__invalid-icon--warning {
    fill: $support-warning;
  }

  .#{$prefix}--slider__invalid-icon--warning path[data-icon-path="inner-path"] {
    fill: $inverse-01;
    opacity: 1;
  }

  .#{$prefix}--slider__validation-msg.#{$prefix}--form-requirement {
    display: block;
    overflow: visible;
    max-height: 100%;
  }

  .#{$prefix}--slider__validation-msg--invalid {
    color: $text-error;
  }

  .#{$prefix}--slider--readonly.#{$prefix}--slider {
    cursor: default;
  }

  .#{$prefix}--slider-container--readonly .#{$prefix}--slider__thumb {
    height: 0;
    width: 0;

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

  .#{$prefix}--slider-container--readonly .#{$prefix}--slider-text-input {
    background-color: transparent;
  }
}

/// Two-handle range slider (Carbon v11 port for v10)
/// @access private
/// @group slider
@mixin slider-two-handle {
  .#{$prefix}--slider-container--two-handles {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .#{$prefix}--slider-container--two-handles .#{$prefix}--slider {
    margin-left: 4px;
    margin-right: 4px;
  }

  .#{$prefix}--slider-text-input-wrapper--hidden {
    display: none;
  }

  // Thumb wrapper — positions each handle along the track.
  .#{$prefix}--slider__thumb-wrapper {
    position: absolute;
    z-index: 3;
    height: 24px;
    width: 16px;
    transform: translate(-50%, -50%);
    top: 50%;
  }

  .#{$prefix}--slider__thumb-wrapper--lower {
    transform: translate(-100%, -50%);
  }

  .#{$prefix}--slider__thumb-wrapper--upper {
    transform: translate(0, -50%);
  }

  // Override the round single-handle thumb when in two-handle mode.
  // Chain `.bx--slider__thumb` to win specificity over the v10 base styles,
  // which are imported after this file in `all.scss`.
  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower,
  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper {
    position: absolute;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    // Reset the v10 single-handle `translate(-50%, -50%)` that would otherwise
    // pull the arrow icon up/left off the track at rest.
    transform: none;
    transition: none;

    &::before {
      position: absolute;
      z-index: -1;
      display: block;
      background: $ui-background;
      height: 2px;
      content: "";
      width: 6px;
      top: calc(50% - 1px);
    }

    &:hover {
      background: transparent;
      box-shadow: none;
      transform: none;

      // Only recolor the non-focus icon; the focus-state icon must keep its
      // $interactive-01 fill even when the focused thumb is hovered.
      .#{$prefix}--slider__thumb-icon:not(.#{$prefix}--slider__thumb-icon--focus) {
        fill: $text-02;
      }
    }

    &:active {
      background: transparent;
      box-shadow: none;
      transform: none;
    }

    &:focus {
      background: transparent;
      box-shadow: none;
      transform: none;
      outline: none;

      .#{$prefix}--slider__thumb-icon:not(.#{$prefix}--slider__thumb-icon--focus) {
        display: none;
      }

      .#{$prefix}--slider__thumb-icon--focus {
        display: block;
      }
    }
  }

  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower::before {
    right: 0;
  }

  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper::before {
    left: 0;
  }

  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower:focus::before,
  .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper:focus::before {
    width: 100%;
  }

  .#{$prefix}--slider__thumb-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    // $ui-05 is the highest-contrast UI color in v10 (dark on light themes,
    // light on dark themes); equivalent to v11's $layer-selected-inverse used
    // by Carbon React for the range-slider arrow handles.
    fill: $ui-05;
  }

  .#{$prefix}--slider__thumb-icon--focus {
    display: none;
    fill: $interactive-01;
  }

  // When either handle is focused, recolor the filled track.
  .#{$prefix}--slider__thumb-wrapper:focus-within
    ~ .#{$prefix}--slider__filled-track {
    background-color: $interactive-04;
  }

  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--lower,
  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb.#{$prefix}--slider__thumb--upper {
    background: transparent;

    &:hover,
    &:active,
    &:focus {
      background: transparent;
      transform: none;
    }

    .#{$prefix}--slider__thumb-icon {
      fill: $disabled-02;
    }
  }
}

@include exports('slider-validation') {
  @include slider-validation;
  @include slider-two-handle;
}