// ********************************************
// container definition
$wizard-indicator: #{$prefix}-wizard-steps-indicator;
$wizard-indicator-item: #{$prefix}-wizard-steps-indicator-step;
// ********************************************

@mixin dotted($color, $size) {
  height: $size;
  background-image: linear-gradient(to right, $color 40%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 3px $size;
  background-repeat: repeat-x;
}

$bullet-size: space(l);
$color-active: color(brand-primary, 600);
$color-completed: color(brand-primary, 500);
$color-inactive: color(neutral, 200);

.#{$wizard-indicator} {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.#{$wizard-indicator-item} {
  display: flex;
  justify-content: center;
  flex: 1 1 0px;
  min-width: 96px;
  max-width: 144px;
  margin: 0 8px;

  .#{$wizard-indicator-item}-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .#{$wizard-indicator-item}__bullet-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .#{$wizard-indicator-item}__bullet {
    margin: space(xs);
    width: $bullet-size;
    height: $bullet-size;
    border-radius: 50%;
    font-size: font-size(600);
    border: border-size() solid $color-inactive;
    color: color(brand-primary, 600);
    position: relative;
    transition: all duration(base) easing(in);
    @include center();
  }

  .#{$wizard-indicator-item}__label {
    @include h5-text-style();
    color: color(neutral, 500);
    transition: all duration(base) easing(in);
    text-align: center;
    width: 100%;
    max-height: 36px;
  }

  &:not(:last-child) {
    // line
    .#{$wizard-indicator-item}__bullet-wrapper::after {
      margin: 0 5px;
      position: absolute;
      top: 50%;
      left: calc(62%);
      display: block;
      width: 80%;
      content: '';
      transition: all duration(slow) easing(in);
      @include dotted($color-inactive, 1px);
    }
  }
}

// STATES
.#{$wizard-indicator-item}--completed {
  .#{$wizard-indicator-item}__bullet {
    border-color: color(brand-primary, 600);
  }
  .#{$wizard-indicator-item}__label {
    color: color(neutral, 800);
  }
}

.#{$wizard-indicator-item}--active {
  .#{$wizard-indicator-item}__bullet {
    border-color: color(brand-primary, 700);
    color: color(brand-primary, 700);
    font-weight: bold;
    border-width: 1.5px;
  }
  .#{$wizard-indicator-item}__label {
    color: color(brand-primary, 700);
    font-weight: bold;
  }
}

// complete line
.#{$wizard-indicator-item}--completed {
  &:not(:last-child) {
    // line
    .#{$wizard-indicator-item}__bullet-wrapper::after {
      background: color(brand-primary, 700);
      background-size: initial;
    }
  }
}