/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '../core/styles/elevation';
@use '../core/styles/typography';
@use '../core/styles/animation';
@use './token-utils' as *;

@forward './token-utils';

// The max clip is reduced by 1 full tick display which is 2x the container
// size to account for always showing the active track on the outside
// edge of the last tick.
$_active-track-max-clip: calc(100% - #{token(with-tick-marks-container-size)} * 2);

// When the start fraction is !0, add clipping by the tick container size
$_start-fraction-not-zero: min(#{token(start-fraction, custom)} * 1e9, 1);
$_active-track-start-offset: calc(#{token(with-tick-marks-container-size)} * #{$_start-fraction-not-zero});
$_active-track-start-clip: calc(#{$_active-track-start-offset} + #{$_active-track-max-clip} * #{token(start-fraction, custom)});

// When the end fraction is !1, add clipping by the tick container size
$_end-fraction-not-one: min((1 - #{token(end-fraction, custom)}) * 1e9, 1);
$_active-track-end-offset: calc(#{token(with-tick-marks-container-size)} * #{$_end-fraction-not-one});
$_active-track-end-clip: calc(#{$_active-track-end-offset} + #{$_active-track-max-clip} * (1 - #{token(end-fraction, custom)}));

@mixin container {
  display: inline-flex;
  vertical-align: middle;
  min-inline-size: 100%;
}

@mixin slider {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  block-size: #{token(state-layer-size)};
  pointer-events: none;
  touch-action: none;
}

@mixin range {
  // Clip the inputs to the space left/right of the center point between the
  // values so the right input gets pointer events.
  $_clip-to-start: calc(
    #{token(state-layer-size)} / 2 + (100% - #{token(state-layer-size)}) *
    (#{token(start-fraction, custom)} + ((#{token(end-fraction, custom)} - #{token(start-fraction, custom)}) / 2))
  );

  $_clip-to-end: calc(100% - $_clip-to-start);

  // in 'rtl', clip right side of "lesser" input
  @each $_rtl-selector in get-rtl-selectors('input.start') {
    #{$_rtl-selector} {
      clip-path: inset(0 0 0 $_clip-to-end);
    }
  }

  input.start {
    clip-path: inset(0 $_clip-to-end 0 0);
  }

  input.end {
    clip-path: inset(0 0 0 $_clip-to-start);
  }

  // in 'rtl', clip left side of "greater" input
  @each $_rtl-selector in get-rtl-selectors('input.end') {
    #{$_rtl-selector} {
      clip-path: inset(0 $_clip-to-start 0 0);
    }
  }
}

@mixin track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

@mixin track-dimensions {
  $_track-padding: calc((#{token(state-layer-size)} / 2) - #{token(with-tick-marks-container-size)});

  position: absolute;
  inset-inline-start: $_track-padding;
  inset-inline-end: $_track-padding;
  background-size: calc((100% - #{token(with-tick-marks-container-size)} * 2) / #{token(tick-count, custom)}) 100%;
}

@mixin track-active {
  block-size: #{token(active-track-height)};
  border-radius: #{token(active-track-shape)};
  clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
  background-color: #{token(active-track-color)};
}

@mixin track-inactive {
  block-size: #{token(inactive-track-height)};
  border-radius: #{token(inactive-track-shape)};
  background-color: #{token(inactive-track-color)};
}

@mixin track-active-disabled {
  background-color: #{token(disabled-active-track-color)};
}

@mixin track-inactive-disabled {
  opacity: calc((1 / #{token(disabled-active-track-opacity)}) * #{token(disabled-inactive-track-opacity)});
  background-color: #{token(disabled-inactive-track-color)};
}

@mixin rtl-track-clipping {
  clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
}

@mixin tickmarks-inactive {
  background-image: get-tick-image(#{token(with-tick-marks-inactive-container-color)});
}

@mixin tickmarks-active {
  background-image: get-tick-image(#{token(with-tick-marks-active-container-color)});
}

@mixin tickmarks-active-disabled {
  background-image: get-tick-image(#{token(with-tick-marks-disabled-active-container-color)});
}

@mixin tickmarks-inactive-disabled {
  background-image: get-tick-image(#{token(with-tick-marks-disabled-inactive-container-color)});
}

@mixin handle-container-dimensions {
  position: relative;
  block-size: 100%;
  inline-size: 100%;
}

@mixin handle-container-padded {
  padding-inline: calc(#{token(state-layer-size)} / 2);
}

@mixin handle-container {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: calc(100% * #{token(start-fraction, custom)});
  inline-size: calc(100% * (#{token(end-fraction, custom)} - #{token(start-fraction, custom)}));
}

@mixin handle {
  position: absolute;
  block-size: #{token(state-layer-size)};
  inline-size: #{token(state-layer-size)};
  border-radius: #{token(handle-shape)};
  display: grid;
  place-items: center;
}

@mixin handle-start {
  inset-inline-start: calc(0px - #{token(state-layer-size)} / 2);
}

@mixin handle-end {
  inset-inline-end: calc(0px - #{token(state-layer-size)} / 2);
}

@mixin handle-thumb {
  @include elevation.box-shadow(1);

  position: absolute;
  height: #{token(handle-height)};
  width: #{token(handle-width)};
  border-radius: #{token(handle-shape)};
  background: #{token(handle-color)};
}

@mixin handle-thumb-hover {
  background: #{token(hover-handle-color)};
}

@mixin handle-thumb-pressed {
  background: #{token(pressed-handle-color)};
}

@mixin handle-thumb-focused {
  background: #{token(focus-handle-color)};
}

@mixin handle-thumb-disabled {
  @include elevation.box-shadow(0);

  background: #{token(disabled-handle-color)};
}

@mixin handle-label {
  @include typography.style(label1, $exclude: [font-weight]);

  position: absolute;
  box-sizing: border-box;
  display: grid;
  padding: 4px;
  place-items: center;
  border-radius: #{token(label-container-shape)};
  color: #{token(label-text-color)};
  font-weight: 500;
  white-space: nowrap;
  inset-block-end: 100%;
  min-inline-size: #{token(label-container-height)};
  min-block-size: #{token(label-container-height)};
  background: #{token(label-container-color)};
  transition: transform animation.variable(duration-short2) animation.variable(easing-standard);
  transform-origin: center bottom;
  transform: scale(0);
}

@mixin handle-label-disabled {
  background: #{token(disabled-handle-color)};
}

@mixin handle-label-content {
  z-index: 1;
}

@mixin handle-label-base {
  position: absolute;
  display: block;
  background: inherit;
}

@mixin handle-label-top {
  inset: 0;
  border-radius: inherit;
}

@mixin handle-label-bottom {
  $_triangle-size: calc(#{token(label-container-height)} / 2);
  inline-size: $_triangle-size;
  block-size: $_triangle-size;
  bottom: calc(#{token(label-container-height)} / -10);
  transform: rotate(45deg);
}

@mixin handle-label-visible {
  transform: scale(1);
}

@mixin input-disabled {
  cursor: not-allowed;
}

@mixin handles-overlapping {
  border: #{token(with-overlap-handle-outline-color)} solid #{token(with-overlap-handle-outline-width)};
}

@mixin on-top {
  z-index: 1;
}

@mixin input {
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    -webkit-appearance: none;
  }

  &::-moz-range-track {
    appearance: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    block-size: #{token(state-layer-size)};
    inline-size: #{token(state-layer-size)};
    transform: scaleX(0);
    opacity: 0;
    z-index: 2;
  }

  &::-moz-range-thumb {
    appearance: none;
    block-size: #{token(state-layer-size)};
    inline-size: #{token(state-layer-size)};
    transform: scaleX(0);
    opacity: 0;
    z-index: 2;
  }
}

///
/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/slider/lib/_slider.scss)
///

// Returns a background-image with sized circular ticks of the given color.
@function get-tick-image($color) {
  @return radial-gradient(
    circle at #{token(with-tick-marks-container-size)} center,
    #{$color} 0,
    #{$color} calc(#{token(with-tick-marks-container-size)} / 2),
    transparent calc(#{token(with-tick-marks-container-size)} / 2)
  );
}

// Returns a list of rtl selectors to construct distinct rulesets. Separating
// rulesets ensure they are not dropped on browsers where one is not supported;
// note, `:where` cannot be used to create compound selectors that contain
// pseudo elements
// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
@function get-rtl-selectors($selector: '', $suffix: '') {
  @return (
    // TODO: remove selectors other than `:dir` when browser support improves.
    ':host-context([dir="rtl"]) #{$selector}#{$suffix}',
    ':host([dir="rtl"]) #{$selector}#{$suffix}',
    '#{$selector}:dir(rtl)#{$suffix}'
  );
}

