// Lightning Design System 2.24.3
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@mixin range-thumb {
  @include appearance(none);
  width: $slider-handle-size;
  height: $slider-handle-size;
  border-radius: var(--slds-c-slider-thumb-radius-border, var(--sds-c-slider-thumb-radius-border, $border-radius-circle));
  background: none; // Reset underlying styles
  background-color: var(--slds-c-slider-thumb-color-foreground, var(--sds-c-slider-thumb-color-foreground, $brand-accessible));
  border: 0;
  box-shadow: var(--slds-c-slider-thumb-shadow, var(--sds-c-slider-thumb-shadow, var(--slds-g-color-neutral-base-10, #{$slider-handle-shadow})));
  cursor: pointer;
  transition: background 0.15s ease-in-out;

  &:hover {
    // @todo re-evaluate Styling Hooks reassignment
    background-color: var(--slds-c-slider-thumb-color-foreground-hover, var(--sds-c-slider-thumb-color-foreground-hover, $brand-accessible-active));
  }
}

@mixin range-track {
  width: 100%;
  height: $slider-track-height;
  cursor: pointer;
  background: none; // Reset underlying styles
  background-color: var(--slds-c-slider-track-color-background, var(--sds-c-slider-track-color-background, var(--slds-g-color-neutral-base-95, #{$slider-track-color-background})));
  border-radius: var(--slds-c-slider-track-radius-border, var(--sds-c-slider-track-radius-border, $border-radius-small));
}

/**
 * @summary Initializes slider component
 *
 * @name base
 * @selector .slds-slider
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-slider {
  display: flex;
  position: relative;
}

/**
 * @summary Range track for slider
 *
 * @selector .slds-slider__range
 * @restrict .slds-slider input
 */
.slds-slider__range {
  @include appearance(none);
  width: 100%;
  background: none; // Reset underlying styles
  background-color: transparent;
  border-radius: $border-radius-small;

  &:focus {
    outline: 0;
  }

  // Webkit
  &::-webkit-slider-thumb {
    @include range-thumb;
    margin-top: calc(((#{$slider-handle-size} / 2) - (#{$slider-track-height} / 2)) * -1);
  }

  &::-webkit-slider-runnable-track {
    @include range-track;
  }

  // Firefox
  &::-moz-range-thumb {
    @include range-thumb;
  }

  &::-moz-range-track {
    @include range-track;
  }

  // IE/Edge
  &::-ms-track {
    @include range-track;
    border-color: transparent;
    color: transparent;
    cursor: pointer;
  }

  &::-ms-thumb {
    @include range-thumb;
    margin-top: calc(#{$slider-track-height} / 4);
  }

  &:focus::-webkit-slider-thumb {
    background-color: var(--slds-c-slider-thumb-color-foreground-focus, var(--sds-c-slider-thumb-color-foreground-focus, $brand-accessible-active));
    box-shadow: var(--slds-c-slider-thumb-shadow-focus,
      var(--sds-c-slider-thumb-shadow-focus, var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus})));
  }

  &:active::-webkit-slider-thumb {
    background-color: var(--slds-c-slider-thumb-color-foreground-active, var(--sds-c-slider-thumb-color-foreground-active, $brand-accessible-active));
  }

  &:focus::-moz-range-thumb {
    background-color: var(--slds-c-slider-thumb-color-foreground-focus, var(--sds-c-slider-thumb-color-foreground-focus, $brand-accessible-active));
    box-shadow: var(--slds-c-slider-thumb-shadow-focus, var(--sds-c-slider-thumb-shadow-focus, $shadow-button-focus));
  }

  &:active::-moz-range-thumb {
    background-color: var(--slds-c-slider-thumb-color-foreground-active, var(--sds-c-slider-thumb-color-foreground-active, $brand-accessible-active));
  }

  &[disabled] {

    &::-webkit-slider-thumb {
      background-color: var(--slds-g-color-neutral-base-80, #{$slider-color-background-disabled});
      cursor: default;
    }

    &::-webkit-slider-runnable-track {
      background-color: var(--slds-g-color-neutral-base-95, #{$slider-color-background-disabled});
      cursor: default;
    }

    &::-moz-range-thumb {
      background-color: var(--slds-g-color-neutral-base-80, #{$slider-color-background-disabled});
      cursor: default;
    }

    &::-moz-range-track {
      background-color: var(--slds-g-color-neutral-base-95, #{$slider-color-background-disabled});
    }

    &::-ms-thumb {
      background-color: var(--slds-g-color-neutral-base-80, #{$slider-color-background-disabled});
      cursor: default;
    }

    &::-ms-track {
      background-color: var(--slds-g-color-neutral-base-95, #{$slider-color-background-disabled});
      cursor: default;
    }
  }
}

/**
 * @summary Element that contains value of input range
 *
 * @selector .slds-slider__value
 * @restrict .slds-slider span
 */
.slds-slider__value {
  padding: 0 $spacing-x-small;
}

/**
 * @summary Contains the label and range for the slider label - not required
 *
 * @selector .slds-slider-label
 * @restrict .slds-form-element span
 */
.slds-slider-label {
  // Hook for adding a11y class if needed to hide
}

/**
 * @summary Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range
 *
 * @selector .slds-slider-label__label
 * @restrict .slds-slider-label span
 */
.slds-slider-label__label {
  display: block;
}

/**
 * @summary Contains the range for the slider
 *
 * @selector .slds-slider-label__range
 * @restrict .slds-slider-label span
 */
.slds-slider-label__range {
  // Hook for adding a11y class to hide
}

/**
 * @summary Modifier that makes the slider vertical
 *
 * @selector .slds-slider_vertical
 * @restrict .slds-slider
 * @modifier
 */
.slds-slider_vertical {
  height: ($size-x-small + $height-input);

  .slds-slider__range {
    width: $size-x-small;
    height: $slider-handle-size;
    transform: rotate(-90deg);
    transform-origin: ($size-x-small * 0.5) ($size-x-small * 0.5);
  }

  .slds-slider__value {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0;
  }
}