@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;

.stepper {
  // scss-docs-start stepper-css-vars
  --#{$prefix}stepper-steps-gap: #{$stepper-steps-gap};
  --#{$prefix}stepper-step-gap: #{$stepper-step-gap};
  --#{$prefix}stepper-step-button-width: #{$stepper-step-button-width};
  --#{$prefix}stepper-step-button-color: #{$stepper-step-button-color};
  --#{$prefix}stepper-step-button-active-color: #{$stepper-step-button-active-color};
  --#{$prefix}stepper-step-button-complete-color: #{$stepper-step-button-complete-color};
  --#{$prefix}stepper-step-button-disabled-color: #{$stepper-step-button-disabled-color};
  --#{$prefix}stepper-step-indicator-width: #{$stepper-step-indicator-width};
  --#{$prefix}stepper-step-indicator-height: #{$stepper-step-indicator-height};
  --#{$prefix}stepper-step-indicator-bg: #{$stepper-step-indicator-bg};
  --#{$prefix}stepper-step-indicator-color: #{$stepper-step-indicator-color};
  --#{$prefix}stepper-step-indicator-border-width: #{$stepper-step-indicator-border-width};
  --#{$prefix}stepper-step-indicator-border-color: #{$stepper-step-indicator-border-color};
  --#{$prefix}stepper-step-indicator-transition: #{$stepper-step-indicator-transition};
  --#{$prefix}stepper-step-indicator-active-color: #{$stepper-step-indicator-active-color};
  --#{$prefix}stepper-step-indicator-active-bg: #{$stepper-step-indicator-active-bg};
  --#{$prefix}stepper-step-indicator-active-border-color: #{$stepper-step-indicator-active-border-color};
  --#{$prefix}stepper-step-indicator-complete-color: #{$stepper-step-indicator-complete-color};
  --#{$prefix}stepper-step-indicator-complete-bg: #{$stepper-step-indicator-complete-bg};
  --#{$prefix}stepper-step-indicator-complete-border-color: #{$stepper-step-indicator-complete-border-color};
  --#{$prefix}stepper-step-indicator-disabled-color: #{$stepper-step-indicator-disabled-color};
  --#{$prefix}stepper-step-indicator-disabled-bg: #{$stepper-step-indicator-disabled-bg};
  --#{$prefix}stepper-step-indicator-disabled-border-color: #{$stepper-step-indicator-disabled-border-color};
  --#{$prefix}stepper-step-indicator-focus-box-shadow: #{$stepper-step-indicator-focus-box-shadow};
  --#{$prefix}stepper-step-indicator-icon: #{$stepper-step-indicator-icon};
  --#{$prefix}stepper-step-indicator-icon-color: #{$stepper-step-indicator-icon-color};
  --#{$prefix}stepper-step-indicator-icon-size: #{$stepper-step-indicator-icon-size};
  --#{$prefix}stepper-step-connector-height: #{$stepper-step-connector-height};
  --#{$prefix}stepper-step-connector-gap: #{$stepper-step-connector-gap};
  --#{$prefix}stepper-step-connector-bg: #{$stepper-step-connector-bg};
  --#{$prefix}stepper-step-connector-complete-bg: #{$stepper-step-connector-complete-bg};
  --#{$prefix}stepper-step-connector-transition: #{$stepper-step-connector-transition};
  --#{$prefix}stepper-step-content-transition: #{$stepper-step-content-transition};
  // scss-docs-end stepper-css-vars
}

.stepper-steps {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--#{$prefix}stepper-steps-gap);
  justify-content: space-between;
  padding: 0;
}

.stepper-step {
  position: relative;
  display: flex;
  gap: var(--#{$prefix}stepper-step-gap);
  align-items: center;

  &:not(:last-child) {
    flex: 1;

    &.vertical {
      flex: 1 1 0;
    }
  }

  &.vertical {
    position: relative;
    flex: 0 0 auto;
    align-items: start;

    .stepper-step-button {
      flex-direction: column;
      align-items: center;
      width: var(--#{$prefix}stepper-step-button-width);
    }

    .stepper-step-connector {
      position: absolute;
      inset-inline-start: calc((var(--#{$prefix}stepper-step-button-width) / 2) + (var(--#{$prefix}stepper-step-indicator-width) / 2) + var(--#{$prefix}stepper-steps-gap)); // stylelint-disable-line function-disallowed-list
      top: calc(var(--#{$prefix}stepper-step-indicator-height) / 2); // stylelint-disable-line function-disallowed-list
      width: calc(100% - var(--#{$prefix}stepper-step-indicator-width) + var(--#{$prefix}stepper-steps-gap) - (var(--#{$prefix}stepper-steps-gap) * 2)); // stylelint-disable-line function-disallowed-list
      transform: translateY(-50%);
    }
  }
}

.stepper-step-button {
  display: flex;
  gap: var(--#{$prefix}stepper-step-gap);
  align-items: center;
  padding: 0;
  color: var(--#{$prefix}stepper-step-button-color);
  background: transparent;
  border: 0;

  &.active {
    --#{$prefix}stepper-step-button-color: var(--#{$prefix}stepper-step-button-active-color);
    --#{$prefix}stepper-step-indicator-color: var(--#{$prefix}stepper-step-indicator-active-color);
    --#{$prefix}stepper-step-indicator-bg: var(--#{$prefix}stepper-step-indicator-active-bg);
    --#{$prefix}stepper-step-indicator-border-color: var(--#{$prefix}stepper-step-indicator-active-border-color);
  }

  &:disabled {
    --#{$prefix}stepper-step-button-color: var(--#{$prefix}stepper-step-button-disabled-color);
    --#{$prefix}stepper-step-indicator-color: var(--#{$prefix}stepper-step-indicator-disabled-color);
    --#{$prefix}stepper-step-indicator-bg: var(--#{$prefix}stepper-step-indicator-disabled-bg);
    --#{$prefix}stepper-step-indicator-border-color: var(--#{$prefix}stepper-step-indicator-disabled-border-color);
  }

  &.complete {
    --#{$prefix}stepper-step-button-color: var(--#{$prefix}stepper-step-button-complete-color);
    --#{$prefix}stepper-step-indicator-color: var(--#{$prefix}stepper-step-indicator-complete-color);
    --#{$prefix}stepper-step-indicator-bg: var(--#{$prefix}stepper-step-indicator-complete-bg);
    --#{$prefix}stepper-step-indicator-border-color: var(--#{$prefix}stepper-step-indicator-complete-border-color);

    .stepper-step-indicator-text {
      display: none;
    }

    ~ .stepper-step-connector {
      --#{$prefix}stepper-step-connector-bg: var(--#{$prefix}stepper-step-connector-complete-bg);
    }
  }

  &:not(.complete) .stepper-step-indicator-icon{
    display: none;
  }

  &:focus {
    outline: 0;

    .stepper-step-indicator {
      box-shadow: var(--#{$prefix}stepper-step-indicator-focus-box-shadow);
    }
  }
}

.stepper-step-indicator {
  display: flex;
  flex: 0 0 var(--#{$prefix}stepper-step-indicator-width);
  align-items: center;
  justify-content: center;
  width: var(--#{$prefix}stepper-step-indicator-width);
  height: var(--#{$prefix}stepper-step-indicator-height);
  color: var(--#{$prefix}stepper-step-indicator-color);
  background: var(--#{$prefix}stepper-step-indicator-bg);
  border: var(--#{$prefix}stepper-step-indicator-border-width) solid var(--#{$prefix}stepper-step-indicator-border-color);
  @include border-radius(50em);
  @include transition(var(--#{$prefix}stepper-step-indicator-transition));
}

.stepper-step-indicator-icon {
  display: block;
  width: var(--#{$prefix}stepper-step-indicator-icon-size);
  height: var(--#{$prefix}stepper-step-indicator-icon-size);
  background-color: var(--#{$prefix}stepper-step-indicator-icon-color);
  mask: var(--#{$prefix}stepper-step-indicator-icon) center / var(--#{$prefix}stepper-step-indicator-icon-size) no-repeat;
}

.stepper-step-connector {
  flex: 1;
  height: var(--#{$prefix}stepper-step-connector-height);
  background: var(--#{$prefix}stepper-step-connector-bg);
  @include transition(var(--#{$prefix}stepper-step-connector-transition));

}

.stepper-pane:not(.show) {
  display: none;
}

.stepper-vertical {
  display: flex;
  flex-direction: column;

  .stepper-steps {
    display: block;
  }

  .stepper-step {
    position: relative;
    display: block;
    &:not(:last-child) {
      min-height: calc(var(--#{$prefix}stepper-step-indicator-height) * 2); // stylelint-disable-line function-disallowed-list
    }
  }

  .stepper-step-connector {
    position: absolute;
    inset-inline-start: calc(var(--#{$prefix}stepper-step-indicator-width) / 2); // stylelint-disable-line function-disallowed-list
    top: calc(var(--#{$prefix}stepper-step-indicator-height) + var(--#{$prefix}stepper-steps-gap)); // stylelint-disable-line function-disallowed-list
    width: var(--#{$prefix}stepper-step-connector-height);
    height: calc(100% - var(--#{$prefix}stepper-step-indicator-height) - var(--#{$prefix}stepper-step-connector-gap)); // stylelint-disable-line function-disallowed-list
    transform: translateX(-50%);
  }

  .stepper-step-content {
    padding-inline-start: calc(var(--#{$prefix}stepper-step-indicator-width) + var(--#{$prefix}stepper-step-connector-gap) / 2); // stylelint-disable-line function-disallowed-list
    @include transition(var(--#{$prefix}stepper-step-content-transition));
  }

  .stepper-step .stepper-step-button:not(.active) ~ .stepper-step-content:not(.collapsing):not(.collapse) {
    display: none;
  }
}