@use "../../../styles/mixins";

.root {
  --_size: 1.875rem;
  --progress: 0;

  position: relative;
  overflow-x: hidden;
  padding-top: 4rem;

  @include mixins.reset-range();
}

.slider {
  cursor: pointer;
  height: var(--_size) !important;
  margin-bottom: 0 !important;

  &::-webkit-slider-runnable-track {
    height: var(--_size);
    border-radius: 1rem;
    background-color: var(--color-background-secondary);
  }

  &::-moz-range-track {
    height: var(--_size);
    border-radius: 1rem;
    background-color: var(--color-background-secondary);
  }

  &::-webkit-slider-thumb {
    width: var(--_size);
    height: var(--_size);
    border: none;

    background-color: transparent;
    outline: none;
    box-shadow: none;
  }

  &::-moz-range-thumb {
    width: var(--_size);
    height: var(--_size);
    border: none;

    background-color: transparent;
    outline: none;
    box-shadow: none;
  }
}

.sparkles {

  --_width: calc(100% - 1rem);

  pointer-events: none;

  bottom: 0;
  left: 0;

  height: var(--_size);

  color: white;

  mask-image: linear-gradient(to right, black var(--_width), transparent calc(var(--_width) + 0.5rem));
}

.progress {
  pointer-events: none;

  position: absolute;
  bottom: 0;
  left: 0;

  width: calc(var(--_size) + (var(--progress) * (100% - var(--_size))));
  min-width: var(--_size);
  height: var(--_size);
  border-radius: 1rem;

  background-image: var(--stars-gradient);

  &::after {
    content: "";

    position: absolute;
    z-index: 1;
    top: 0.125rem;
    right: 0.125rem;

    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;

    background-color: white;
  }
}

.floatingBadgeWrapper {
  --_min-x: 0;
  --_max-x: 100%;

  pointer-events: none;

  position: absolute;
  right: 0;
  left: 0;
  transform:
  translateX(
    clamp(
      var(--_min-x),
      calc(var(--_size) / 2 + var(--progress) * (100% - var(--_size))),
      var(--_max-x),
    )
  );
}

.floatingBadge {
  --_speed: 0;

  position: absolute;
  top: -1rem;
  left: 0;
  transform: translate(-50%, -100%);
}

.floatingBadgeText {
  display: flex;
  gap: 0.125rem;
  align-items: center;

  padding: 0.5rem 1rem;
  border-radius: 2rem;

  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: white;
  white-space: nowrap;

  background-image: var(--stars-gradient);
}

.floatingBadgeTriangle {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 33%);
}
