@import "../theme/variable";
@import "../theme/mixins";

.mat-mdc-slider {
  &.qms-range-slider {
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    &:not(.mat-slider-disabled) {
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-track-background {
        background-color: theme-apply($slider-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-track-fill {
        background: theme-apply($active);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-thumb {
        right: -6px;
        bottom: -6px;
        width: 12px;
        height: 12px;
        background-color: theme-apply($active);
        border-color: theme-apply($active);
        box-sizing: border-box;
        border: 3px solid transparent;
        border-radius: 50%;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-thumb:after {
        content: "";
        background-color: theme-apply($slider-hover-border);
        background-size: 0%;
        background-position: center;
        display: block;
        position: absolute;
        border-radius: 50%;
        left: -21px;
        right: -21px;
        top: 0;
        bottom: 0;
        width: 0px;
        height: 0px;
        margin: auto;
        opacity: 1;
        transition: background 1s;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &.mat-slider-min-value:not(.mat-slider-thumb-label-showing) {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          background-color: theme-apply($active);
          border-color: theme-apply($slider-focus-border);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &.mat-slider-has-ticks .mat-slider-wrapper::after {
        border-color: theme-apply($slider-tick-color);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover {
        border-color: theme-apply($slider-hover-border);
      }

      &:focus-visible {
        border-color: theme-apply($slider-focus-border);
      }

      &.cdk-mouse-focused,
      &.cdk-touch-focused,
      &.cdk-program-focused {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          border-width: 18px;
          border-color: theme-apply($slider-focus-border);
          transform: scale(0.7);
        }
      }

      &.qms-range-slider-active {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb:after {
          width: 48px;
          height: 48px;
          background-size: 100%;
          background-position: center;
          transition: all 500ms;
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    &.mat-slider-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-thumb {
        background-color: black(0.26);
        border-color: transparent;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    .mat-slider-ticks {
      background-image: repeating-linear-gradient(
        to right,
        theme-apply($slider-tick-color),
        theme-apply($slider-tick-color) 2px,
        transparent 0,
        transparent
      );
      opacity: 1;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    .mat-slider-focus-ring {
      background-color: transparent;
    }

    .mdc-slider__track--inactive {
      background-color: theme-apply($primary-dark-24-opacity);
    }

    .mdc-slider__track--active_fill {
      background-color: theme-apply($primary);
      border-color: theme-apply($primary);
    }

    .mdc-slider__thumb-knob {
      background-color: theme-apply($primary);
      border-color: theme-apply($primary);
    }
  }
}

.mat-mdc-slider {
  &.qms-range-slider-lockup {
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    &:not(.mat-slider-disabled) {
      &:focus-visible {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          border-width: 18px;
          border-color: theme-apply($slider-focus-border);
          transform: scale(0.7);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &.cdk-focused.mat-slider-thumb-label-showing {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb-label {
          border-radius: 10%;
          transform: rotate(0deg);
          background: theme-apply($default-color);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          border-width: 18px;
          border-color: theme-apply($slider-pressed);
          transform: scale(0.7);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb-label-text {
          transform: rotate(0deg);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb-label::after {
          position: absolute;
          left: calc(50% - 8px);
          top: 28px;
          width: 0;
          height: 0;
          content: "";
          margin: 0 auto;
          transform: rotate(0deg);
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 6px solid theme-apply($default-color);
        }
      }
    }
  }
}

.mat-mdc-slider:hover {
  &.qms-range-slider {
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    &:not(.mat-slider-disabled) {
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          border-color: theme-apply($slider-hover-border);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-thumb {
        height: 48px;
        width: 48px;
        border-color: theme-apply($slider-hover-border);
        border: solid 18px theme-apply($slider-hover-border);
        bottom: -24px;
        right: -24px;
        background-clip: padding-box;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
    &.mat-slider-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      .mat-slider-thumb {
        border-color: transparent;
      }
    }
  }
}

.mat-mdc-slider {
  &.qms-range-slider {
    &.cdk-focused,
    &.cdk-keyboard-focused,
    &.cdk-mouse-focused,
    &.cdk-touch-focused,
    &.cdk-program-focused {
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &:not(.mat-slider-disabled) {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          transform: scale(0.7);
          height: 48px;
          width: 48px;
          border-color: theme-apply($slider-focus-border);
          border: solid 18px theme-apply($slider-focus-border);
          bottom: -24px;
          right: -24px;
          background-clip: padding-box;
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
      &.mat-slider-disabled {
        /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
        .mat-slider-thumb {
          border-color: transparent;
        }
      }
    }
  }
}
