@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

.qpp-c-step-indicator {
  font-family: v.$font-rubik;
  font-size: v.$font-size-16;
  background-color: transparent;
  margin-bottom: v.$spacing-24;
  margin-left: -1px;
  margin-right: -1px;

  @include m.at-media(xs) {
    margin-left: 0;
    margin-right: 0;
  }
}

.qpp-c-step-indicator__segments {
  counter-reset: qpp-c-step-indicator;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qpp-c-step-indicator__segment {
  flex: 1 1 0%;
  counter-increment: qpp-c-step-indicator;
  margin-left: 1px;
  margin-right: 1px;
  max-width: 15rem;
  min-height: f.rem(4px);
  position: relative;

  // Add segment
  &::after {
    background-color: v.$gray-10;
    content: '';
    display: block;
    // Use a fixed segment height for mobile regardless of settings
    height: f.rem(4px);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.qpp-c-step-indicator__segment--complete {
  &::after {
    background-color: v.$blue-80;
  }
  .usa-step-indicator__segment-label {
    color: v.$blue-80;
  }
}

.qpp-c-step-indicator__segment--current {
  &::after {
    background-color: v.$blue-60;
  }
  .usa-step-indicator__segment-label {
    color: v.$blue-60;
    font-weight: v.$font-medium;
  }
}

.qpp-c-step-indicator__segment-label {
  display: none;
  // Show labels only at the min-width
  @include m.at-media(xs) {
    color: v.$gray-80;
    display: block;
    font-size: v.$font-size-14;
    // Add margin based on segment size
    margin-top: v.$spacing-16;
    padding-right: v.$spacing-12;
    text-align: left;
  }
}

.qpp-c-step-indicator__header {
  align-items: baseline;
  display: flex;
}

.qpp-c-step-indicator__heading {
  color: v.$gray-80;
  font-family: v.$font-rubik;
  font-size: v.$font-size-24;
  font-weight: v.$font-medium;
  margin: v.$spacing-24 0 0;
  @include m.at-media(xs) {
    font-size: v.$font-size-20;
    margin-top: v.$spacing-24;
  }
}

.qpp-c-step-indicator__heading-counter {
  display: block;
  font-size: v.$font-size-14;
  letter-spacing: f.rem(0.5px);
  padding-bottom: v.$spacing-8;
}

// TODO: qpp designs don't use seperate styling for current step like uswds does, but
// keep this class just in case we'd like to in future.
// .qpp-c-step-indicator__current-step {
// }
// .qpp-c-step-indicator__total-steps {
// }

.qpp-c-step-indicator__heading-text {
  font-weight: v.$font-regular;
  font-size: v.$font-size-24;
}

.qpp-c-step-indicator--counters {
  .qpp-c-step-indicator__segment {
    @include m.at-media(xs) {
      margin-left: 0;
      margin-right: 0;
      margin-top: v.$spacing-16;

      // Add counter
      &::before {
        font-size: v.$font-size-14;
        height: f.rem(28px);
        border-radius: 99rem;
        width: f.rem(28px);
        font-feature-settings: 'tnum' 1, 'kern' 1;
        background-color: v.$white;
        box-shadow: inset 0 0 0 f.rem(3px) v.$gray-10,
          0 0 0 v.$spacing-4 v.$white;
        color: v.$gray-80;
        content: counter(qpp-c-step-indicator);
        display: block;
        font-weight: v.$font-medium;
        left: 0;
        line-height: 1.5;
        // Magic number circle centering
        padding: calc((#{v.$spacing-24} - (2ex * #{v.$line-height-sm})) * 0.5);
        position: absolute;
        text-align: center;
        top: calc((#{v.$spacing-24} - #{v.$spacing-4}) / -2);
        z-index: 100;
      }

      &:last-child {
        // Don't show the last segment when counters appear
        // stylelint-disable-next-line max-nesting-depth
        &::after {
          display: none;
        }
      }
    }
  }

  .qpp-c-step-indicator__segment--complete {
    &::before {
      background-color: v.$blue-80;
      box-shadow: 0 0 0 v.$spacing-4 v.$white;
      color: v.$white;
      height: v.$spacing-24;
      width: v.$spacing-24;
      line-height: v.$line-height-md;
    }
  }

  .qpp-c-step-indicator__segment--current {
    &::before {
      background-color: v.$blue-60;
      box-shadow: 0 0 0 v.$spacing-4 v.$white;
      color: v.$white;
      height: v.$spacing-24;
      width: v.$spacing-24;
      line-height: v.$line-height-md;
    }

    .qpp-c-step-indicator__segment-label {
      font-weight: v.$font-medium;
      color: v.$blue-60;
    }
  }

  .qpp-c-step-indicator__segment-label {
    @include m.at-media(xs) {
      // Add counter margin
      margin-top: f.rem(20px);
    }
  }
}