@use '../utils/constants.scss';
@use '../utils/mixins.scss';
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Stepper';

$stepperBaseClass: '#{constants.$prefix}stepper';

$stepperLineThicknessVarName: '--#{constants.$prefix}comp-stepper-line-thickness';
$stepperMarkerContainerSizeVarName: '--#{constants.$prefix}comp-stepper-size-container';
$stepperInlineStartLineSpaceVarName: '--#{constants.$prefix}comp-stepper-space-inline-start';
$stepperVerticalLineMinHeightVarName: '--#{constants.$prefix}comp-stepper-size-line-min-height';
$stepperLineColorVarName: '--#{constants.$prefix}comp-stepper-line-color';

.#{$stepperBaseClass} {
  #{$stepperLineThicknessVarName}: #{tokens.$bm-comp-stepper-border-width-line};
  #{$stepperMarkerContainerSizeVarName}: #{tokens.$bm-comp-stepper-size-md-container};
  #{$stepperInlineStartLineSpaceVarName}: calc(
    #{tokens.$bm-comp-stepper-space-horizontal-line-gap} + var(
        #{$stepperMarkerContainerSizeVarName}
      ) / 2
  );
  #{$stepperVerticalLineMinHeightVarName}: 1.5rem;

  .#{$stepperBaseClass}__step--marker-only {
    #{$stepperMarkerContainerSizeVarName}: #{tokens.$bm-comp-stepper-size-sm-container};
    #{$stepperInlineStartLineSpaceVarName}: calc(
      #{tokens.$bm-comp-stepper-space-horizontal-line-gap} + var(
          #{$stepperMarkerContainerSizeVarName}
        ) / 2
    );
  }

  display: flex;
  justify-content: center;
  width: 100%;
  padding: unset;
  align-items: flex-start;

  &--horizontal {
    flex-direction: row;
  }

  &--vertical {
    #{$stepperLineThicknessVarName}: #{tokens.$bm-comp-stepper-border-width-container};
    #{$stepperInlineStartLineSpaceVarName}: calc(
      #{tokens.$bm-comp-stepper-size-md-line-wrapper} / 2
    );

    .#{$stepperBaseClass}__step--marker-only {
      #{$stepperInlineStartLineSpaceVarName}: calc(
        #{tokens.$bm-comp-stepper-size-sm-line-wrapper} / 2
      );
    }

    flex-direction: column;
  }
}

.#{$stepperBaseClass}__step {
  #{$stepperLineColorVarName}: #{tokens.$bm-comp-stepper-color-line};

  display: flex;
  position: relative;
  padding-block: 0;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;

  &--error {
    .#{$stepperBaseClass}__marker {
      border-color: tokens.$bm-comp-stepper-color-error-border;
      background: tokens.$bm-comp-stepper-color-error-bg;
      color: tokens.$bm-comp-stepper-color-error-fg;
    }

    .#{$stepperBaseClass}__heading {
      color: tokens.$bm-comp-stepper-color-error-heading;
    }
  }

  &--current {
    .#{$stepperBaseClass}__marker {
      border-color: tokens.$bm-comp-stepper-color-current-border;
      background: tokens.$bm-comp-stepper-color-current-bg;
      color: tokens.$bm-comp-stepper-color-current-fg;
    }

    .#{$stepperBaseClass}__heading {
      color: tokens.$bm-comp-stepper-color-current-heading;
    }
  }

  &--complete {
    .#{$stepperBaseClass}__marker {
      border-color: tokens.$bm-comp-stepper-color-complete-border;
      background: tokens.$bm-comp-stepper-color-complete-bg;
      color: tokens.$bm-comp-stepper-color-complete-fg;
    }

    .#{$stepperBaseClass}__heading {
      color: tokens.$bm-comp-stepper-color-complete-heading;
    }

    #{$stepperLineColorVarName}: #{tokens.$bm-comp-stepper-color-line-complete};

    .#{$stepperBaseClass}__content-wrapper {
      border-inline-start-color: var(#{$stepperLineColorVarName});
    }
  }

  &--horizontal {
    min-width: var(#{$stepperMarkerContainerSizeVarName});

    &::after {
      content: '';
      inline-size: calc(
        100% -
          (
            var(#{$stepperMarkerContainerSizeVarName}) + 2 * #{tokens.$bm-comp-stepper-space-horizontal-line-gap}
          )
      );
      inset-inline-start: calc(50% + var(#{$stepperInlineStartLineSpaceVarName}));
      background: var(#{$stepperLineColorVarName});
      height: var(#{$stepperLineThicknessVarName});
      inset-block-start: calc(
        var(#{$stepperMarkerContainerSizeVarName}) / 2 -
          var(#{$stepperLineThicknessVarName}) / 2
      );
      position: absolute;
    }

    &:last-child {
      &::after {
        content: unset;
      }
    }

    .#{$stepperBaseClass}__body {
      text-align: center;
    }
  }

  &--vertical {
    flex-direction: column;
    align-items: start;
    width: 100%;

    .#{$stepperBaseClass}__content-wrapper {
      width: calc(
        100% -
          (
            var(#{$stepperInlineStartLineSpaceVarName}) + #{tokens.$bm-comp-stepper-space-vertical-content-wrapper-gap}
          )
      );
      min-height: var(#{$stepperVerticalLineMinHeightVarName});
      flex: 1;
      border-inline-start: 0.0625rem solid var(#{$stepperLineColorVarName});
      padding-inline-start: calc(
        var(#{$stepperInlineStartLineSpaceVarName}) + #{tokens.$bm-comp-stepper-space-vertical-content-wrapper-gap}
      );
      margin-inline-start: calc(
        var(#{$stepperInlineStartLineSpaceVarName}) -
          (var(#{$stepperLineThicknessVarName}) / 2)
      );
      padding-block-end: tokens.$bm-comp-stepper-space-vertical-content-bottom;
      margin-block: tokens.$bm-comp-stepper-space-vertical-content-wrapper-y;
    }

    &:last-child {
      .#{$stepperBaseClass}__content-wrapper {
        border: unset;
      }
    }
  }
}

.#{$stepperBaseClass}__marker-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: tokens.$bm-comp-stepper-space-gap;

  &--vertical {
    flex-direction: row;
    justify-content: flex-start;
    padding-inline-start: unset;
    gap: tokens.$bm-comp-stepper-space-gap;
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: tokens.$bm-comp-stepper-space-content-gap;
    padding: 0 #{tokens.$bm-comp-stepper-space-horizontal-content-x};
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

.#{$stepperBaseClass}__marker {
  width: tokens.$bm-comp-stepper-size-md-container;
  height: tokens.$bm-comp-stepper-size-md-container;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: tokens.$bm-comp-stepper-radius;
  border: tokens.$bm-comp-stepper-border-width-container solid
    tokens.$bm-comp-stepper-color-incomplete-border;
  background: tokens.$bm-comp-stepper-color-incomplete-bg;
  font: tokens.$bm-comp-stepper-typo-number;
  color: tokens.$bm-comp-stepper-color-incomplete-fg;
  text-align: center;
  padding: unset;

  &--interactive {
    cursor: pointer;
    &:focus-visible {
      @include mixins.simulated-inset-outline();
    }
  }

  > svg {
    width: tokens.$bm-sem-size-icon-sm;
    height: tokens.$bm-sem-size-icon-sm;
    flex-shrink: 0;
  }

  &--marker-only {
    width: tokens.$bm-comp-stepper-size-sm-container;
    height: tokens.$bm-comp-stepper-size-sm-container;

    > svg {
      width: tokens.$bm-sem-size-icon-xs;
      height: tokens.$bm-sem-size-icon-xs;
    }
  }
}

.#{$stepperBaseClass}__heading {
  font: tokens.$bm-comp-stepper-typo-heading;
  color: tokens.$bm-comp-stepper-color-incomplete-heading;
  text-align: center;
  &--interactive {
    cursor: pointer;
  }
}

.#{$stepperBaseClass}__body {
  color: tokens.$bm-comp-stepper-color-body;
  font: tokens.$bm-comp-stepper-typo-body;
  text-align: start;
}