/* $step-gutter: 5rem !default;
$step-content-width: 5rem !default;
$step-content-padding-top: .5rem !default;
$step-circle-size: 3rem !default;
$step-circle-border-width: .2rem !default;
 */
$step-gutter: 5rem !default;
$step-content-width: 7rem !default;
$step-content-padding-top: .5rem !default;
$step-circle-size: 3rem !default;
$step-circle-border-width: .1rem !default;

$step-default-circle-color: $gray-700 !default;
$step-default-circle-bg-color: $gray-300 !default;
$step-default-circle-border-color: $gray-500 !default;
$step-default-text-color: $gray-500 !default;

$step-active-circle-color: $white !default;
$step-active-circle-bg-color: $primary !default;
$step-active-circle-border-color: $primary !default;
$step-active-text-color: $primary !default;

$step-error-circle-color: $white !default;
$step-error-circle-bg-color: $danger !default;
$step-error-circle-border-color: $danger !default;
$step-error-text-color: $danger !default;

$step-success-circle-color: $primary !default;
$step-success-circle-bg-color: $white !default;
$step-success-circle-border-color: $primary !default;
$step-success-text-color: $primary !default;


.steps {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  overflow-x: auto;

  .step {
    &:first-child {
      margin-left: auto;
    }
    &:last-child {
      margin-right: auto;
    }
  }
}

.step {
  &:first-of-type {
    .step-circle::before {
      display: none;
    }
  }

  &:last-of-type {
    .step-content {
      padding-right: 0;
    }
  }
}

.step-content {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: $step-content-width;
  min-width: $step-content-width;
  max-width: $step-content-width;
  padding-top: $step-content-padding-top;
  padding-right: $step-gutter;
}

.step-circle {
  font-size: 1.2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: $step-circle-size;
  height: $step-circle-size;
  color: $step-default-circle-color;
  border-radius: 100%;
  background-color: $step-default-circle-bg-color;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: -$step-circle-border-width;
    width: calc(#{$step-content-width} + #{$step-gutter} - #{$step-circle-size});
    height: $step-circle-border-width;
    transform: translate(-100%, -50%);
    color: $step-default-circle-border-color;
    background-color: currentColor;
  }
}

.step-text {
  color: $step-default-text-color;
  margin-top: 0.25em;
  font-size: $font-size-xs;
}

.step-active {
  .step-circle { 
    color: $step-active-circle-color;
    background-color: $step-active-circle-bg-color;
    border-color: $step-active-circle-border-color;
    &::before {
      color: $step-active-circle-border-color;
    }
  }
  .step-text {
    color: $step-active-text-color;
  }
}

.step-error {
  .step-circle {
    color: $step-error-circle-color;
    background-color: $step-error-circle-bg-color;
    border-color: $step-error-circle-border-color;
    &::before {
      color: $step-error-circle-border-color;
    }
  }
  .step-text {
    color: $step-error-text-color;
  }
}

.step-success {
  .step-circle {
    color: $step-active-circle-color;
    background-color: $step-active-circle-bg-color;
    border-color: $step-active-circle-border-color;
    &::before {
      color: $step-success-circle-border-color;
    }
  }
  .step-text {
    color: $step-success-text-color;
  }
}