$step-indicator-label-margin-top: 1; $step-indicator-margin-bottom: 4; $step-indicator-header-margin-top: 4; $step-indicator-header-margin-top-sm: 2; $step-indicator-segment-height-mobile: 1; $step-indicator-counter-size: 5; $step-indicator-counter-size-sm: 3;

.usa-step-indicator {

@include typeset(
  $theme-step-indicator-font-family,
  $theme-step-indicator-label-font-size,
  2
);
background-color: color($step-indicator-background-color);
margin-bottom: units($step-indicator-margin-bottom);
margin-left: units($theme-step-indicator-segment-gap) / -2;
margin-right: units($theme-step-indicator-segment-gap) / -2;

@include at-media($theme-step-indicator-min-width) {
  @include u-margin-x(0);
}

}

.usa-step-indicator__segments {

counter-reset: usa-step-indicator;
display: flex;
list-style: none;
margin: 0;
padding: 0;

}

.usa-step-indicator__segment {

@include u-flex("fill");
counter-increment: usa-step-indicator;
margin-left: units($theme-step-indicator-segment-gap) / 2;
margin-right: units($theme-step-indicator-segment-gap) / 2;
max-width: units("card-lg");
min-height: units($theme-step-indicator-segment-height);
position: relative;

// Add segment
&:after {
  background-color: color($theme-step-indicator-segment-color-pending);
  content: "";
  display: block;
  // Use a fixed segment height for mobile regardless of settings
  height: units($step-indicator-segment-height-mobile);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  @include at-media($theme-step-indicator-min-width) {
    height: units($theme-step-indicator-segment-height);
  }
}

}

.usa-step-indicator__segment–complete {

&::after {
  background-color: color($theme-step-indicator-segment-color-complete);
}
.usa-step-indicator__segment-label {
  color: color($theme-step-indicator-segment-color-complete);
}

}

.usa-step-indicator__segment–current {

&::after {
  background-color: color($theme-step-indicator-segment-color-current);
}
.usa-step-indicator__segment-label {
  color: color($theme-step-indicator-segment-color-current);
  font-weight: fw("bold");
}

}

.usa-step-indicator__segment-label {

display: none;
// Show labels only at the min-width
@include at-media($theme-step-indicator-min-width) {
  color: color($theme-step-indicator-text-pending-color);
  display: block;
  font-size: size(
    $theme-step-indicator-font-family,
    $theme-step-indicator-label-font-size
  );
  // Add margin based on segment size
  margin-top: calc(
    #{units($theme-step-indicator-segment-height)} + #{units(
        $step-indicator-label-margin-top
      )}
  );
  padding-right: units(4);
  text-align: left;
}

}

.usa-step-indicator__header {

align-items: baseline;
display: flex;

}

.usa-step-indicator__heading {

color: color($theme-step-indicator-heading-color);
font-family: family($theme-step-indicator-heading-font-family);
font-size: size(
  $theme-step-indicator-heading-font-family,
  $theme-step-indicator-heading-font-size-small
);
font-weight: font-weight("bold");
margin: units($step-indicator-header-margin-top-sm) 0 0;
@include at-media($theme-step-indicator-min-width) {
  font-size: size(
    $theme-step-indicator-heading-font-family,
    $theme-step-indicator-heading-font-size
  );
  margin-top: units($step-indicator-header-margin-top);
}

}

.usa-step-indicator__current-step {

$step-lh: lh($theme-step-indicator-heading-font-family, 2);
@include u-circle($step-indicator-counter-size);
@include u-text("normal", "tabular");
background-color: color($theme-step-indicator-segment-color-current);
color: color($step-indicator-background-color);
display: inline-block;
// Magic number circle centering
padding: calc(
  (#{units($step-indicator-counter-size)} - (2ex * #{$step-lh})) * 0.5
);
text-align: center;

}

.usa-step-indicator__total-steps {

@include u-text("normal", "tabular");
color: color($theme-step-indicator-segment-color-current);
margin-right: units(1);

}

.usa-step-indicator–counters, .usa-step-indicator–counters-sm {

.usa-step-indicator__segment {
  @include at-media($theme-step-indicator-min-width) {
    $counter-lh: lh($theme-step-indicator-font-family, 1);
    // Remove segment gaps
    @include u-margin-x(0);

    // Add extra margin for counter
    @if $theme-step-indicator-counter-gap == 0 {
      margin-top: calc(
        (
          (
              #{units($step-indicator-counter-size)} -
                #{units($theme-step-indicator-segment-height)}
            ) /
            2
        )
      );
    } @else {
      margin-top: calc(
        (
            (
                #{units($step-indicator-counter-size)} -
                  #{units($theme-step-indicator-segment-height)}
              ) /
              2
          ) +
          #{units($theme-step-indicator-counter-gap)}
      );
    }

    // Add counter
    &:before {
      @include u-circle($step-indicator-counter-size);
      @include u-text("tabular");
      background-color: color($step-indicator-background-color);
      box-shadow: inset 0 0 0
          units($theme-step-indicator-counter-border-width)
          color($theme-step-indicator-segment-color-pending),
        0 0 0 units($theme-step-indicator-counter-gap)
          color($step-indicator-background-color);
      color: color($theme-step-indicator-text-pending-color);
      content: counter(usa-step-indicator);
      display: block;
      font-weight: fw("bold");
      left: 0;
      line-height: lh($theme-step-indicator-font-family, 1);
      // Magic number circle centering
      padding: calc(
        (#{units($step-indicator-counter-size)} - (2ex * #{$counter-lh})) *
          0.5
      );
      // padding: 1.5ex;
      position: absolute;
      text-align: center;
      top: calc(
        (
            #{units($step-indicator-counter-size)} - #{units(
                $theme-step-indicator-segment-height
              )}
          ) / -2
      );
      z-index: z(100);
    }

    &:last-child {
      // Don't show the last segment when counters appear
      &:after {
        display: none;
      }
    }
  }
}

.usa-step-indicator__segment--complete {
  &::before {
    background-color: color($theme-step-indicator-segment-color-complete);
    box-shadow: 0 0 0 units($theme-step-indicator-counter-gap)
      color($step-indicator-background-color);
    color: color($step-indicator-background-color);
  }
}

.usa-step-indicator__segment--current {
  &::before {
    background-color: color($theme-step-indicator-segment-color-current);
    box-shadow: 0 0 0 units($theme-step-indicator-counter-gap)
      color($step-indicator-background-color);
    color: color($step-indicator-background-color);
  }
}

.usa-step-indicator__segment-label {
  @include at-media($theme-step-indicator-min-width) {
    // Add counter margin
    margin-top: calc(
      (
          (
              #{units($step-indicator-counter-size)} + #{units(
                  $theme-step-indicator-segment-height
                )}
            ) / 2
        ) + #{units($step-indicator-label-margin-top)}
    );
  }
}

// Adjust segments with centered variant
&.usa-step-indicator--center {
  @include at-media($theme-step-indicator-min-width) {
    .usa-step-indicator__segment {
      &:first-child {
        &:after {
          left: 50%;
          right: 0;
          width: auto;
        }
      }
      &:last-child {
        &:after {
          display: block;
          left: 0;
          right: 50%;
          width: auto;
        }
      }
    }
  }
}

}

.usa-step-indicator–counters-sm {

.usa-step-indicator__segment {
  @include at-media($theme-step-indicator-min-width) {
    $counter-lh: lh($theme-step-indicator-font-family, 1);
    // Add extra margin for counter
    @if $theme-step-indicator-counter-gap == 0 {
      margin-top: calc(
        (
          (
              #{units($step-indicator-counter-size-sm)} -
                #{units($theme-step-indicator-segment-height)}
            ) /
            2
        )
      );
    } @else {
      margin-top: calc(
        (
            (
                #{units($step-indicator-counter-size-sm)} -
                  #{units($theme-step-indicator-segment-height)}
              ) /
              2
          ) +
          #{units($theme-step-indicator-counter-gap)}
      );
    }

    // Add counter
    &:before {
      @include u-circle($step-indicator-counter-size-sm);
      @include u-font-size($theme-step-indicator-font-family, 3);
      padding: calc(#{units(0.5)} + 1px);
      top: calc(
        (
            #{units($step-indicator-counter-size-sm)} - #{units(
                $theme-step-indicator-segment-height
              )}
          ) / -2
      );
    }

    &:last-child {
      // Don't show the last segment when counters appear
      &:after {
        display: none;
      }
    }
  }
}

.usa-step-indicator__segment-label {
  @include at-media($theme-step-indicator-min-width) {
    // Add counter margin
    margin-top: calc(
      (
          (
              #{units($step-indicator-counter-size-sm)} + #{units(
                  $theme-step-indicator-segment-height
                )}
            ) / 2
        ) + #{units($step-indicator-label-margin-top)}
    );
  }
}

}

.usa-step-indicator–no-labels {

margin-left: units($theme-step-indicator-segment-gap) / -2;
margin-right: units($theme-step-indicator-segment-gap) / -2;

.usa-step-indicator__segment {
  // Remove extra counter margin
  margin-top: 0;
  // Add gap between segments
  margin-left: units($theme-step-indicator-segment-gap) / 2;
  margin-right: units($theme-step-indicator-segment-gap) / 2;
  &:before {
    // Don't show counters
    display: none;
  }
  &:last-child {
    // Show last segment
    &:after {
      display: block;
    }
  }
}
.usa-step-indicator__heading {
  margin-top: units($step-indicator-header-margin-top-sm);
}

}

.usa-step-indicator–no-labels {

.usa-step-indicator__segment-label {
  // Don't show labels, even if they exist
  display: none;
}

}

.usa-step-indicator–center {

margin-left: units($theme-step-indicator-segment-gap) / -2;
margin-right: units($theme-step-indicator-segment-gap) / -2;

.usa-step-indicator__segment {
  margin-left: units($theme-step-indicator-segment-gap) / 2;
  margin-right: units($theme-step-indicator-segment-gap) / 2;

  &:before {
    @if $theme-step-indicator-counter-gap == 0 {
      left: calc(50% - ((#{units($step-indicator-counter-size)}) / 2));
    } @else {
      left: calc(
        50% -
          (
            (
                #{units($step-indicator-counter-size)} +
                  #{units($theme-step-indicator-counter-gap)}
              ) /
              2
          )
      );
    }
  }
}

.usa-step-indicator__segment-label {
  // Balance label padding
  @include u-padding-x(1);
  // Center labels
  text-align: center;
}

&.usa-step-indicator--no-labels {
  .usa-step-indicator__segment {
    // Use full-width segments
    &:first-child {
      &:after {
        left: 0;
      }
    }
    &:last-child {
      &:after {
        right: 0;
      }
    }
  }
}

&.usa-step-indicator--counters-sm {
  .usa-step-indicator__segment {
    &:before {
      @if $theme-step-indicator-counter-gap == 0 {
        left: calc(50% - ((#{units($step-indicator-counter-size-sm)}) / 2));
      } @else {
        left: calc(
          50% -
            (
              (
                  #{units($step-indicator-counter-size-sm)} +
                    #{units($theme-step-indicator-counter-gap)}
                ) /
                2
            )
        );
      }
    }
  }
}

}