$step-default:            theme-color('info-transparent') !default;
$step-complete:           theme-color('info') !default;
$step-active:             theme-color('secondary-darker') !default;
$step-hover:              theme-color('primary') !default;

.steps {
	@extend .d-flex;
}

.steps-item {
	@extend %d-flex,
          %text-default,
          %align-items-center;
}

.steps-link {
  @extend %font-size-base,
          %font-weight-bold;
  color:  $step-default;

  @include x-hover-focus-active {
    color:  $step-hover;
    text-decoration: none;
  }

  .prev-step & {
    color:  $step-complete;
  }

  &.disabled {
    pointer-events: none;
  }

  .current-step & {
    @include x-no-hover-focus-active {
      color:  $step-active;
      text-decoration: none;
      pointer-events: none;
    }
  }
}

.steps-icon {
  color:  $step-default;
  opacity: 0.3;
}