/* stylelint-disable declaration-property-value-keyword-no-deprecated */
@use 'sass:math';
@use '@mezzanine-ui/system/effect';
@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/transition' as transition;
@use './slider' as *;

$rail-height: spacing.semantic-variable(size, element, hairline) !default;
$handler-size: spacing.semantic-variable(size, element, base) !default;
$handler-scale-size: spacing.semantic-variable(size, element, relaxed) !default;
$handler-color: palette.semantic-variable('background', brand) !default;

.#{$prefix} {
  display: inline-flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;

  &--disabled {
    .#{$rail-prefix} {
      cursor: default;
      pointer-events: none;
    }

    .#{$track-prefix} {
      pointer-events: none;

      > span {
        background-color: palette.semantic-variable(background, neutral-light);
      }
    }

    .#{$handler-prefix} {
      pointer-events: none;

      > span {
        background-color: palette.semantic-variable(background, neutral-subtle);
      }
    }
  }

  &__input {
    width: spacing.semantic-variable(size, element, expansive);

    &:first-of-type {
      margin-right: spacing.semantic-variable(gap, comfort);
    }

    &:last-of-type {
      margin-left: spacing.semantic-variable(gap, comfort);
    }

    .mzn-text-field {
      text-align: center;
      width: spacing.semantic-variable(size, element, expansive);
      padding: spacing.semantic-variable(padding, vertical, calm) spacing.semantic-variable(padding, horizontal, tiny);
    }
  }

  &__controls {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    height: $handler-size;
  }
}

.#{$rail-prefix} {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  height: 100%;
  position: absolute;
  width: 100%;

  > span {
    background-color: palette.semantic-variable(background, neutral-light);
    display: block;
    height: $rail-height;
    width: 100%;
  }
}

.#{$track-prefix} {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 100%;
  left: var(--#{$prefix}-track-position);
  position: absolute;
  width: var(--#{$prefix}-track-width);

  > span {
    background-color: palette.semantic-variable(background, brand);
    display: block;
    height: $rail-height;
    width: 100%;
  }
}

.#{$handler-prefix} {
  border-radius: 50%;
  height: $handler-scale-size;
  outline: none;
  position: relative;
  user-select: none;
  width: $handler-scale-size;

  > span {
    background-color: $handler-color;
    border-radius: 50%;
    box-shadow: effect.variable(shadow, slider-handle);
    height: $handler-size;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: $handler-size;
    transition: transition.standard(transform, fast);
  }

  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  &:hover, &--active {
    > span {
      transform: translate(-50%, -50%) scale(calc($handler-scale-size / $handler-size));
    }
  }

  &:focus-visible {
    > span {
      box-shadow: effect.variable(focus, primary);
    }
  }
}

.#{$handler-tooltip-prefix} {
  text-wrap: nowrap;
}

.#{$handler-position-prefix} {
  align-items: center;
  display: flex;
  left: var(--#{$prefix}-handler-position);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);

  &:not(:has(:active)) {
    transition: transition.standard(left, fast);
  }

  &--start {
    left: var(--#{$prefix}-handler-start-position);
  }

  &--end {
    left: var(--#{$prefix}-handler-end-position);
  }
}

.#{$icon-prefix} {
  display: flex;
  align-items: center;
  justify-content: center;
  width: spacing.semantic-variable(size, element, base);
  height: spacing.semantic-variable(size, element, base);

  &:first-of-type {
    margin-right: spacing.semantic-variable(gap, comfort);
  }

  &:last-of-type {
    margin-left: spacing.semantic-variable(gap, comfort);
  }
}

.#{$prefix}__tick {
  background-color: palette.semantic-variable(background, base);
  border-radius: 100%;
  display: flex;
  height: $rail-height;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: $rail-height;

  // tick number Typography
  > span {
    margin-top: spacing.semantic-variable(gap, base);
    height: fit-content;
    transform: translateX(-50%);
  }
}