@import "../../helpers";
.sf-steps {
  &__header {
    position: relative;
    width: 100%;
    display: flex;
    @include border(--steps-border, 0, solid, var(--c-light));
    box-shadow: 0px 4px 11px rgba(var(--c-black-base), 0.1);
  }
  &__step {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: var(--steps-step-background);
    padding: var(--steps-step-padding, var(--spacer-sm) var(--spacer-2xs));
    @include font(
      --step-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--secondary)
    );
    color: var(--steps-step-color, var(--c-link));
    cursor: var(--steps-step-cursor, pointer);
    &.current,
    &.done {
      --steps-step-color: var(--c-primary);
      --steps-step-cursor: default;
      --step-font-weight: var(--font-weight--normal);
    }
    &.is-done {
      --steps-step-cursor: pointer;
    }
    &.is-disabled {
      --steps-step-cursor: not-allowed;
    }
  }
  &__progress {
    content: "";
    position: absolute;
    left: 0;
    bottom: var(--steps-progress-bottom, -2px);
    display: block;
    width: var(--steps-progress-width, var(--_steps-progress-width));
    height: var(--steps-progress-height, 2px);
    background: var(--steps-progress-background, var(--c-primary));
    transform: var(
      --steps-progress-transform,
      scale3d(
        calc(var(--_steps-progress-active-step) - 0.5),
        1,
        1
      ));
    transform-origin: 0 50%;
    transition: var(--steps-progress-transition, transform 150ms ease-in-out);
  }
  &__title {
    text-align: center;
  }
  &__content {
    padding: var(--steps-content-padding, var(--spacer-base) 0 0 0);
  }
  @include for-desktop {
    --steps-step-color: var(--c-text-muted);
    &__header {
      box-shadow: none;
      --steps-border-width: 0 0 2px 0;
    }
    &__step {
      --steps-step-padding: 0 0 var(--spacer-xs) 0;
      --step-font-size: var(--font-size--base);
      &.current,
      &.done {
        --steps-step-after-background: var(--c-primary);
      }
      &::after {
        content: "";
        position: absolute;
        border-radius: 100%;
        bottom: -3.52px;
        left: 49%;
        width: 6px;
        height: 6px;
        background: var(--steps-step-after-background, transparent);
      }
    }
  }
}