// Set default customise component variables here,
// Override it in theme variables files

$x-steps-accordion-box-shadow:     $box-shadow       !default;
$x-steps-accordion-border-radius:  $border-radius-lg !default;
$x-step-bar-border-radius:         $border-radius    !default;
$x-step-bar-success-opacity:       0.15              !default;

.x-steps-accordion {
  @extend %m-auto,
          %py-3,
          %px-2,
          .translate-y-sm-50,
          .steps,
          %bg-light,
          %overflow-hidden,
          .container-fluid-lg;
  @include box-shadow($x-steps-accordion-box-shadow);
  @include media-breakpoint-up(sm) {
    @include border-radius($x-steps-accordion-border-radius);
  }

  .step-item {

    &:not(:last-of-type) {
      &::after {
        @extend %x-min-width-16,
                %w-100;
        @include size(auto, 0.25rem);
        @include border-radius($x-step-bar-border-radius);
        content: "";
      }
    }
    .step-link {
      @extend %border-0,
              %mx-2,
              %px-1,
              %py-0,
              %bg-transparent,
              %x-flex-a-center;
      white-space: nowrap;

      &.is-clickable {
        @extend .btn;
      }

      .step-indicator {
        @extend .rounded-circle,
                %d-inline-flex,
                %align-items-center,
                %justify-content-center;
        @include size(2rem);
      }

      .step-label {
        @extend %d-none,
                %ml-2,
                %pl-1,
                .x-animation-origin-left;
      }

    }
  }

  .step-item {

    &:not(.is-success) {
      .step-indicator,
      &::after {
        @extend %bg-light-secondary,
                %text-info;
      }
    }

    &.is-success {
      .step-indicator,
      &::after {
        @extend %bg-success,
                %text-white;
      }

      &::after {
        opacity: $x-step-bar-success-opacity;
      }
    }

    &.is-active {
      @extend %flex-auto;

      .step-indicator,
      &::after {
        @extend %x-bg-primary;
      }

      .step-label {
        @extend %d-sm-flex;
      }
    }

    &:not(.is-active) {
      @extend %d-sm-flex;

      .step-link {
        @include x-focus-active {
          .step-label {
            @extend %d-sm-flex;
            animation: x-scale-in 0.15s ease-in-out;
          }
        }
      }

      @include x-hover-focus-active {
        .step-label {
          @extend %d-sm-flex;
          animation: x-scale-in 0.15s ease-in-out;
        }
      }
    }
  }

}