@import "../../variables.scss";

.ff-stepper {
  display: flex;
  padding: 0;
  .ff-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;

    &:not(:last-child) {
      &:after {
        content: "";
        position: relative;
        top: calc(clamp(1.5rem, 23px, 2rem) / 2);
        width: calc(100% + 2.94vw - 5vw);
        left: calc(50% + 0px);
        height: 1px;
        background-color: $gray-medium-dark; 
        order: -10;
        transition: background-color 0.7s ease-in-out;
      }
    }

    &.active { // Modified the active class selector
      &:after {
        background-color: $primary;
        transition: background-color 0.7s ease-in-out;
      }
    }
  }

  .ff-step-no {
    color: $white;
    padding: 4px;
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-radius: 50%;
    background-color: $gray-dark;
    margin-bottom: 0.5rem;
    z-index: 5;
    transition: color 1s ease-in-out, background-color 0.6s ease-in-out;

    &.active { // Modified the active class selector
      background-color: $primary;
      color: $white;
    }
  }

  .ff-step-label {
    color: $gray-dark;
    font-size: 16px;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
    transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;

    &.active { // Modified the active class selector
      color:$primary;
      font-weight: 600;
    }
  }
}
