/*------------------------------------*\
  C17- Steps
  Description: Los steps se encontrarán
  fijos en la parte superior de la pantalla
  únicamente para el flujo de generación de
  contrato. Permite devolverse entre los
  steps que ya hayan sido activados.
  Type: Navigation
  Path: /components/Steps.vue
\*------------------------------------*/

/**
  * Class: .ay-c-steps
  * @molecule Block: Steps
  * @section C17 Steps
  * @markup
  *  <nav class="ay-c-steps">
  *    <ul class="ay-c-steps__list">
  *      <li class="ay-c-steps__item ay-c-steps__item_complete"><a class="ay-c-steps__btn" href="#" title="title">Búsqueda de asistencia</a></li>
  *      <li class="ay-c-steps__item ay-c-steps__item_complete"><a class="ay-c-steps__btn" href="#" title="title">Información de los afiliados</a></li>
  *      <li class="ay-c-steps__item ay-c-steps__item_complete"><a class="ay-c-steps__btn" href="#" title="title">Información del contrato</a></li>
  *      <li class="ay-c-steps__item ay-c-steps__item_active"><a class="ay-c-steps__btn" href="#" title="title">Impresión del contrato</a></li>
  *      <li class="ay-c-steps__item"><a class="ay-c-steps__btn" href="#" title="title">Registro de comentarios</a></li>
  *    </ul>
  *  </nav>
  * @script
  *  Steps(:titles=[
  *      'Búsqueda de asistencia',
  *      'Información de los afiliados',
  *      'Información del contrato',
  *      'Impresión del contrato',
  *      'Registro de comentarios'
  *    ],
  *    stepInit=4
  *  )
  */

.ay-c-steps {
  margin-bottom: 10px;
}

.ay-c-steps__list {
  @include flexbox;
  @include align-items(stretch);
  @include justify-content(space-between);
  list-style: none;
  counter-reset: section;
  padding: 10px 0;
}

.ay-c-steps__item {
  position: relative;
  @include flex(1);
  text-align: center;
  padding: 0 4px;
  &:before { 
    content: counter(section);
    counter-increment: section;
    display: block;
    margin: 0 auto 4px;
    width: 30px;
    padding: 4px 0;
    @include font-rem(16px);
    color: $c-neutro;
    z-index: 4;
    background-color: $c-on-mild;
    border-radius: 50%;
    border: 3px solid transparent;
  }
  &:not(:first-child) {
    &:after {
      content: '';
      position: absolute;
      right: 50%;
      top:18px;
      display: block;
      width: 100%;
      height: 1px;
      z-index: -2;
      background-color: $c-on-mild;
    }
  }
  //estado active
  &.ay-c-steps__item_active {
    &:before {
      background-color: $c-primary;
    }
    &:after {
      background-color: $c-primary;
    }
    .ay-c-steps__btn {
      color: $c-primary;
    }
  }
  //estado complete
  &.ay-c-steps__item_complete {
    cursor: pointer;
    &:before {
      content: '\e905';
      padding: 10px 0;
      line-height: 1;
      font-family: $ico-font-family;
      @include font-rem(10px);
      color: $c-primary;
      border: 3px solid $c-primary;
      background-color: $c-neutro;
    }
    &:after {
      background-color: $c-primary;
    }
    .ay-c-steps__btn {
      color: $c-primary;
    }
  }
}

.ay-c-steps__btn {
  width: 100%;
  left: 50%;
  color: $c-on-mild;
  font-family: $f-semibold;
  -ms-transform : translateX(-50%);
  -moz-transform : translateX(-50%);
  -o-transform : translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform : translateX(-50%);
}