/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *     steps component file
 *  ----------- *** ------------
 *
 */

@import "steps_variables";


// Steps

.sn-steps {
  @include flexbox();
  width: 100%;
  height: $default-steps-height;
  margin:0;
  padding:0;
  font-weight: bold;
  clear:both;
  background-color: $default-steps-background;

  &.sn-steps--raised {
    -webkit-box-shadow: $default-steps-raised-box-shadow;
    box-shadow: $default-steps-raised-box-shadow;
  }

  .sn-steps__item {
    position:relative;
    float: left;
    margin-right: $default-steps-item-margin-right;
    padding: $default-steps-item-padding;
    font-size: $default-steps-item-font-size;
    text-transform: uppercase;
    line-height: $default-steps-item-line-height;
    color: $default-steps-waiting-color;
    background-color: $default-steps-waiting-background;
    text-decoration:none;

    .material-icons {
      position: absolute;
      top: 21px;
      left: 16px;
    }

    &:first-child {
      padding-left: calc(#{$default-steps-first-item-header-left} + 40px);

      &:before {
        display: none;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
      }

      .sn-steps__number-icon {
        left: calc(#{#{$default-steps-first-item-header-left}} + 5px)
      }
    }

    &:last-child {
      @include flex(1);
      margin-right: 0px !important;
      &:after {
        display: none;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
      }
    }

    &:before {
      content: "";
      position: absolute;
      top: 0px;
      width:0px;
      height:0px;
      border-top: $default-steps-item-arrow-border-size solid $default-steps-waiting-background;
      border-bottom: $default-steps-item-arrow-border-size solid $default-steps-waiting-background;
      border-left: $default-steps-item-arrow-border-size solid transparent;
      left: $default-steps-item-arrow-position;
    }

    &:after {
      content: "";
      position: absolute;
      top: 0px;
      width: 0px;
      height: 0px;
      border-top: $default-steps-item-arrow-border-size solid transparent;
      border-bottom: $default-steps-item-arrow-border-size solid transparent;
      border-left: $default-steps-item-arrow-border-size solid $default-steps-waiting-background;
      right: $default-steps-item-arrow-position;
    }


    // .sn-steps__item .is-active

    &.is-active {
      color: $default-steps-active-color;
      background-color: $default-steps-active-brackground;
      &:before {
        border-top: $default-steps-item-arrow-border-size solid $default-steps-active-brackground;
        border-bottom: $default-steps-item-arrow-border-size solid $default-steps-active-brackground;
        border-left: $default-steps-item-arrow-border-size solid transparent;
      }
      &:after {
        border-top: $default-steps-item-arrow-border-size solid transparent;
        border-bottom: $default-steps-item-arrow-border-size solid transparent;
        border-left: $default-steps-item-arrow-border-size solid $default-steps-active-brackground;
      }
      &:last-child {
        margin-right: 1px;
      }
      .sn-steps__number-icon {
        background-color: $default-steps-icon-active-background;
      }
    }

    // .sn-steps__item .is-done

    &.is-done {
      color: $default-steps-done-color;
      background-color: $default-steps-done-background;
      &:before {
        border-top: $default-steps-item-arrow-border-size solid $default-steps-done-background;
        border-bottom: $default-steps-item-arrow-border-size solid $default-steps-done-background;
        border-left: $default-steps-item-arrow-border-size solid transparent;
      }
      &:after {
        border-top: $default-steps-item-arrow-border-size solid transparent;
        border-bottom: $default-steps-item-arrow-border-size solid transparent;
        border-left: $default-steps-item-arrow-border-size solid $default-steps-done-background;
      }
      .sn-steps__number-icon {
        background-color: $default-steps-icon-done-background;
      }
    }

    .sn-steps__number-icon {
      position: absolute;
      top: $default-steps-item-number-icon-position-top;
      left: $default-steps-item-number-icon-position-left;
      padding: $default-steps-item-number-icon-padding;
      font-weight: 300;
      font-style: normal;
      border-radius: 50%;
      color: $default-steps-icon-color;
      background-color: $default-steps-icon-waiting-background;

      &.material-icons {
        padding: 1px 2px;
        font-size: 18px;
      }
    }
  }
  // ./sn-steps__item





  &.sn-steps--sm {
    height: 56px;
    .sn-steps__item {
      padding: 22px 2px 0px 38px;
      margin-right: 28px;
      float: left;
      font-size: 0.8em;
      .sn-steps__number-icon {
        top: 20px;
        left: 12px;
        padding: 0.2em 6px 0.1em 6px;
      }
      &.is-done {
        i.material-icons {
          top: 17px;
          left: 12px;
        }
      }
      .icon-24 {
        left: 8px;
      }
      &:first-child {
        //padding: 22px 10px 0px 60px;
        .icon-24 {
          left: 16px;
        }
      }
    }
    .sn-steps__item,
    &.is-done,
    &.is-active {
      &:before {
        border-top-width: 28px;
        border-bottom-width: 28px;
        border-left-width: 28px;
        left: -28px;
      }
      &:after {
        border-top-width: 28px;
        border-bottom-width: 28px;
        border-left-width: 28px;
        right: -26px;
      }
    }

  }
  //./sn-steps sm



  // BUBBLE STEPS

  &.sn-steps__bubble {
    background-color: transparent;
    position: relative;
    z-index: 1;

    .container {
      @include flexbox();
      width: auto;
      margin: 0 auto;
    }
    .sn-steps__bubble-list {
      @include flexbox();
      width: auto;
      margin: 0 auto;
      padding: 0;
      counter-reset: step;

      li {
        @include flex(1);
        list-style-type: none;
        min-width: 84px;
        float: left;
        font-size: 11px;
        line-height: 14px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        color: $default-steps-waiting-color;

        &:before {
          width: 24px;
          height: 24px;
          content: counter(step);
          counter-increment: step;
          line-height: 25px;
          border: 2px solid $default-steps-waiting-color;
          display: block;
          text-align: center;
          margin: 0 auto 10px auto;
          border-radius: 50%;
          background-color: white;
        }

        &:after {
          width: 100%;
          height: 2px;
          content: '';
          position: absolute;
          background-color: $default-steps-waiting-color;
          top: 14px;
          left: -50%;
          z-index: -1;
        }

        &:first-child:after {
          content: none;
        }

        &.is-done {
          color: $default-steps-done-color;
          &:before {
            border-color: $default-steps-done-color;
            background-color: #FFF;
          }
        }

        &.is-done + li:after {
          background-color: $default-steps-done-color;
        }

        &.is-active {
          color: $default-steps-active-color;
          &:before {
            border-color: $default-steps-active-color;
            background-color: #FFF;
          }
        }

        &.is-active + li:after {
          background-color: $default-steps-active-color;
        }

      }

    }
    //./sn-steps__bubble-list
  }
  //./sn-steps__bubble

// SMALL BUBBLE STEPS

  &.sn-steps__small-bubble {
    background-color: transparent;
    position: relative;
    z-index: 1;

    .container {
      @include flexbox();
      width: auto;
      margin: 0 auto;
    }
    .sn-steps__small-bubble-list {
      @include flexbox();
      width: 100%;
      margin: 0 auto;
      padding: 0;

      li {
        @include flex(1);
        list-style-type: none;
        min-width: 84px;
        float: left;
        font-size: 14px;
        line-height: 14px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-weight: 400;
        color: $default-steps-waiting-color;

        &:before {
          width: 17px;
          height: 17px;
          content: '';
          line-height: 25px;
          border: 1px solid $default-steps-waiting-color;
          display: block;
          text-align: center;
          margin: 0 auto 10px auto;
          border-radius: 50%;
          background-color: #F5F5F5;
        }

        &:after {
          width: 100%;
          height: 1px;
          content: '';
          position: absolute;
          background-color: $default-steps-waiting-color;
          top: 9px;
          left: -50%;
          z-index: -1;
        }

        &:first-child:after {
          content: none;
        }

        &.is-done {
          color: $default-steps-waiting-color;
          &:before {
            font-family: "Material Icons";
            content: "\E876";
            border-color: #2979FF;
            background-color: #2979FF;
            color: white;
            font-size: 17px;
            line-height: 17px;
          }

          &:after {
            height: 2px;
          }
        }

        &.is-done + li:after {
          background-color: #2979FF;
        }

        &.is-active {
          color: #2979FF;
          &:before {
            font-family: "Material Icons";
            content: "\E061";
            background-color: #F5F5F5;
            border: 2px solid #2979FF;
            font-size: 17px;
            line-height: 17px;
          }

          &:after {
            height: 2px;
          }
        }

        &.is-active + li:after {
          background-color: #BDBDBD;
        }
      }
    }
    //./sn-steps__small-bubble-list
  }
  //./sn-steps__small-bubble

  // MEDIA
  @media only screen
  and (min-width : 0)
  and (max-width : 1024px) {

    //top: 56px;
    top: 0;
    display: flex;
    background-color: $default-steps-background;
    width: 100%;
    float: none;
    .sn-steps__item {
      visibility: hidden;
      display: none;

      &:first-child {
        &:before {
          display: block;
          border-top: 32px solid $default-steps-waiting-background;
          border-bottom: 32px solid $default-steps-waiting-background;
          border-left: 32px solid transparent;
        }
      }

      &.is-active {
        display: inline-block;
        visibility: visible;
        width: 100%;
        padding-left: 64px;
        flex: 1;
        order: 1;
        &:before {
          left: auto;
          right: -35px;
          flex: 1;
          order: 3;
          border-top: 32px solid $default-steps-waiting-background;
          border-bottom: 32px solid $default-steps-waiting-background;
          border-left: 32px solid transparent;
        }
        &:after {
          flex: 1;
          order: 2;
        }
        .sn-steps__number-icon {
          left: 18px;
        }
      }

    }

    // MEDIA SM
    &.sm {
      .sn-steps__item {
        padding: 22px 2px 0px 48px;
        margin-right: 32px;
        .sn-steps__number-icon {
          left: 18px;
        }
        &.is-done, &.is-active {
          padding-left: 64px;
          &:before {
            border-top-width: 28px;
            border-bottom-width: 28px;
            border-left-width: 28px;
            left: auto;
            right: -31px;
          }
          &:after {
            border-top-width: 28px;
            border-bottom-width: 28px;
            border-left-width: 28px;
            right: -28px;
          }
        }
      }
    }
  }

  // MEDIA ONLY MOBILE
  @media only screen
  and (min-device-width: 0)
  and (max-device-width: 736px) {
    &.sm {
      .sn-steps {
       .sn-steps__item {
          font-size: 12px;
          margin-right: 32px;
        }
      }
    }
  }



}
// ./sn-steps