@import "../../sassUtils/index";

// Step size variables
$stepSizeXs: 14px;
$stepSizeS: 28px;
$stepSizeM: 36px;

.vuiSteps {
  width: 100%;
  position: relative;
  padding: 0 16px;

  --step-size: #{$stepSizeS};

  &--xs {
    --step-size: #{$stepSizeXs};
  }

  &--s {
    --step-size: #{$stepSizeS};
  }

  &--m {
    --step-size: #{$stepSizeM};
  }
}

.vuiSteps__container {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.vuiSteps__stepContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;

  &:not(.vuiSteps__stepContainer--last) {
    margin-right: 16px;
  }
}

.vuiSteps__connector {
  position: absolute;
  height: 2px;
  border-top: 2px dotted var(--vui-color-medium-shade);
  z-index: 1;
  transform: translateY(-1px);

  top: calc(8px + calc(var(--step-size) / 2));
  left: calc(50% + 16px + calc(var(--step-size) / 2));
  width: calc(100% - 16px - var(--step-size));

  &--complete {
    border-top: 2px solid var(--vui-color-medium-shade);
  }
}

.vuiSteps__circleWrapper {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-bottom: $sizeXs;
}

.vuiSteps__contentWrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.vuiStep {
  background: none;
  border: none;
  cursor: default;
  padding: $sizeXs;
  border-radius: $sizeXxs;
  transition: all 0.2s ease;

  .vuiSpinner {
    width: var(--step-size);
    height: var(--step-size);
  }
}

.vuiStep__number {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: $fontWeightBold;
  font-size: $fontSizeSmall;
  transition: all 0.2s ease;
  position: relative;
  color: var(--vui-color-empty-shade);

  width: var(--step-size);
  height: var(--step-size);

  &--xs {
    .vuiIcon {
      width: calc(var(--step-size) * 0.85);
      height: calc(var(--step-size) * 0.85);

      svg {
        width: calc(var(--step-size) * 0.85);
        height: calc(var(--step-size) * 0.85);
      }
    }
  }

  &--complete {
    background-color: var(--vui-color-success-lighter-shade);
  }

  &--current {
    color: var(--vui-color-primary-shade);
    width: calc(var(--step-size) - 4px);
    height: calc(var(--step-size) - 4px);
    box-shadow: 0 0 0 2px var(--vui-color-primary-shade);
    margin-top: 2px;
    margin-bottom: 2px;
  }

  &--incomplete {
    background-color: var(--vui-color-empty-shade);
    border: 2px solid var(--vui-color-light-shade);
    color: var(--vui-color-dark-shade);
  }

  &--warning {
    background-color: var(--vui-color-warning-lighter-shade);
  }

  &--danger {
    background-color: var(--vui-color-danger-lighter-shade);
  }
}

.vuiStep__numberText {
  line-height: 1;
}

.vuiStep__title {
  text-align: center;
  width: 100%;
  padding: 0 $sizeXs;
}

.vuiStep__titleText {
  font-weight: $fontWeightStrong;
  line-height: 1.3;
  color: var(--vui-color-subdued-shade);

  .vuiStep__title--current & {
    color: var(--vui-color-primary-shade);
  }
}

.vuiStep__subTitle {
  margin-top: $sizeXxs;
  font-size: $fontSizeSmall;
  color: var(--vui-color-dark-shade);
  text-align: center;

  &--current {
    color: var(--vui-color-primary-shade);
  }

  .vuiStep--disabled & {
    color: var(--vui-color-medium-shade);
  }
}