@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/breakpoints' as breakpoints;

.stepper-wrapper {
  display: flex;
  align-items: center;
  min-height: spacers.getSpacer(l);

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    min-height: spacers.getSpacer(xl);
  }
}

$transition: 0.4s ease-in-out 0s;

/**
 * Bredde og høyde på markør
 */
$marker-size: 24px;

/**
 * Bredde og høyde på prikk
 */
$dot-size: 8px;

/**
 * Høyde på stepper
 */
$stepper-height: 12px;

/**
 * Horisontal padding på stepper
 */
$stepper-padding-x: 8px;

/**
 * Avstand fra venstre kant av stepper til midten av første prikk
 */
$dot-offset: calc($stepper-padding-x + $dot-size / 2);

.stepper {
  flex-grow: 1;
  position: relative;
  display: block;
  height: $stepper-height;
  border-radius: 4px;
  background:
    linear-gradient(
      to right,
      palette.$blueberry600,
      palette.$blueberry600 $dot-offset,
      palette.$blueberry50 $dot-offset,
      palette.$blueberry50
    ),
    palette.$blueberry600;
  background-repeat: no-repeat;

  @media (prefers-reduced-motion: no-preference) {
    transition: background-position $transition;
  }

  &__marker {
    position: absolute;
    width: $marker-size;
    height: $marker-size;
    top: calc(($stepper-height - $marker-size) / 2);
    background-color: palette.$white;
    border: 6px solid palette.$blueberry600;
    border-radius: 50%;

    @media (prefers-reduced-motion: no-preference) {
      transition: left $transition;
    }
  }

  &__number {
    min-width: 2.5rem;
    text-align: right;
    margin-left: spacers.getSpacer(xs);
    font-size: font-settings.$font-size-xs;
    line-height: font-settings.$lineheight-size-xs;
    font-weight: 700;
    color: palette.$blueberry700;
  }

  &__dot {
    position: absolute;
    top: calc(($stepper-height - $dot-size) / 2);
    width: $dot-size;
    height: $dot-size;
    background-color: palette.$blueberry600;
    border-radius: 50%;

    @media (prefers-reduced-motion: no-preference) {
      transition: background-color $transition;
    }

    &--completed {
      background-color: palette.$blueberry50;
    }

    &--left {
      left: $dot-offset;
    }

    &--right {
      right: $dot-offset;
    }
  }
}