// 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,
          .container-fluid-lg,
          .overflow-hidden;

  @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,
              .d-flex,
              .align-items-center,
              .mx-2,
              .px-1,
              .py-0,
              .bg-transparent;

      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;
        }
      }
    }
  }

}