$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: divide(units($theme-step-indicator-segment-gap), -2);
  margin-right: divide(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: divide(units($theme-step-indicator-segment-gap), 2);
  margin-right: divide(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: divide(units($theme-step-indicator-segment-gap), -2);
  margin-right: divide(units($theme-step-indicator-segment-gap), -2);

  .usa-step-indicator__segment {
    // Remove extra counter margin
    margin-top: 0;
    // Add gap between segments
    margin-left: divide(units($theme-step-indicator-segment-gap), 2);
    margin-right: divide(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: divide(units($theme-step-indicator-segment-gap), -2);
  margin-right: divide(units($theme-step-indicator-segment-gap), -2);

  .usa-step-indicator__segment {
    margin-left: divide(units($theme-step-indicator-segment-gap), 2);
    margin-right: divide(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
              )
          );
        }
      }
    }
  }
}