/**
 * @deprecated Please use 'step-form-new.css' instead!
 */
@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: ceil(($font-size-step * 1.6));
$steps-color: $gray-dark;
$steps-color-active: mix($black, $brand-primary, 20%);

.af-steps {
  margin-bottom: 2rem;

  .af-steps-list {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 2px solid $steps-bg;

    &-step {
      display: table-cell;
      font-size: $font-size-step;
      background: $steps-bg;
      color: $steps-color;
      padding-left: 1.875em;

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

        .af-steps-list-stepNumber,
        .af-steps-list-stepTitle {
          opacity: 1;
        }

        .af-steps-list-stepLabel::after {
          border-color: transparent transparent transparent $steps-bg-active;
        }
      }

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

        .af-steps-list-stepNumber,
        .af-steps-list-stepTitle {
          opacity: 0.5;
        }

        &:hover {
          cursor: pointer;

          .af-steps-list-stepNumber,
          .af-steps-list-stepTitle {
            opacity: 1;
          }
        }

        .af-steps-list-stepLabel:first-child::after {
          border-color: transparent transparent transparent $steps-bg;
        }
      }

      &.disabled {
        color: $gray-lightest;
        background: $gray-lighter;

        .af-steps-list-stepLabel::after {
          border-color: transparent transparent transparent $steps-bg;
        }
      }

      &Label {
        position: relative;
        width: 100%;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          right: -23px;
          top: 50%;
          transform: translate(0, -50%);
          border-style: solid;
          border-width: 50px 0 50px 36px;
          border-color: transparent transparent transparent $white;
        }

        &::after {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          right: -20px;
          top: 50%;
          transform: translate(0, -50%);
          border-style: solid;
          border-width: 50px 0 50px 36px;
          border-color: transparent transparent transparent $steps-bg;
        }
      }

      &Number,
      &Title {
        opacity: 0.3;
      }

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

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

      &Title {
        font-weight: 600;
        padding-top: 0.5rem;
      }

      &:last-child {
        .af-steps-list-stepLabel {
          &::after,
          &::before {
            display: none;
          }
        }

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

      &-step {
        min-width: 3.125rem;

        &Title {
          display: none;
        }

        &Number {
          left: 2rem;
          z-index: 2;

          .glyphicon {
            font-size: ceil(($font-size-step * 1.2));
            width: 17px;
          }
        }

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

          .af-steps-list-stepNumber {
            .glyphicon {
              font-size: ceil(($font-size-step * 1.1));
              width: 17px;
            }
          }
        }
      }
    }
  }
}