@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

// Wizard Steps
// --------------------------------------------------
$steps-bg: $gray-lighter;
$steps-bg-active: $white;
$font-size-step: $font-size-base;
$font-size-step-number: $font-size-base + 0.2rem;
$steps-color: $color-texte;
$steps-color-active: $color-axa;

.af-steps-new {
  margin-bottom: 2rem;
  background: white;

  .af-steps-list {
    display: flex;
    justify-content: space-around;
    line-height: 3rem;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid $steps-bg;
    list-style: none;
    counter-reset: stepper-counter;

    &-step {
      display: inline-flex;
      font-size: $font-size-step;
      color: $steps-color;
      counter-increment: stepper-counter;

      &.number {
        &::before {
          content: none;
        }
      }

      &::before {
        content: counter(stepper-counter);
        color: $steps-color;
        margin-right: 0.8rem;
        font-size: $font-size-step-number;
        font-weight: 600;
      }

      &::after {
        content: '\EA12';
        font-family: icons;
      }

      &.on {
        color: $steps-color-active;

        &::before,
        * {
          color: $steps-color-active;
        }
      }

      &.past {
        color: $color-pager-link;

        &::before {
          color: $color-pager-link;
        }

        &:hover {
          color: $steps-color-active;
        }
      }

      &.disabled {
        color: $color-gray-1;

        &::before {
          color: $color-gray-1;
        }

        & .af-steps-list-stepNumber,
        & .af-steps-list-stepTitle {
          color: $color-gray-1;
        }
      }

      &Label {
        display: inline-flex;
        padding-right: 2rem;
      }

      &Number {
        margin-right: 0.6rem;
        font-size: $font-size-step-number;
        font-weight: 600;
        color: $steps-color;

        .glyphicon {
          font-size: 1.5rem;
          width: 17px;
        }
      }

      &Title {
        font-weight: 600;
        color: $steps-color;

        &:hover {
          color: $steps-color-active;
        }
      }

      &:last-child {
        &.on::before {
          color: $color-btn-success;
        }

        &::before {
          content: '\EABA';
          font-family: icons;
        }

        &::after {
          content: none;
        }

        .af-steps-list-stepLabel {
          padding-right: 0;

          &::after,
          &::before {
            display: none;
          }
        }

        .af-steps-list-stepNumber {
          font-size: ceil(($font-size-step * 1.1));
        }
      }
    }
  }
  @include media-breakpoint-down(xs) {
    .af-steps-list {
      table-layout: auto;

      &-step {
        min-width: 3rem;
        padding-left: 0;

        &Title {
          display: none;
        }

        &Number {
          left: 2rem;
          z-index: 2;
          margin-right: 1rem;

          .glyphicon {
            font-size: 1.2rem;
          }
        }

        &.on {
          .af-steps-list-stepTitle {
            display: block;
          }

          .af-steps-list-stepNumber {
            margin-right: 0.5rem;

            .glyphicon {
              font-size: 1.2rem;
            }
          }
        }
      }
    }
  }
}