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

@import "tabs_variables";


// Tabs



.sn-tabs {
  // background-color: $color-primary;

  ul {
    list-style:none;
    margin:0;
    width:100%;
    height: 48px;
    overflow:hidden;
    padding:0;

    li {
      float:left;
      text-transform: uppercase;
      a {
        color: $default-tab-color;
      }
    }

  }

  @media only screen
  and (min-width : 320px)
  and (max-width : 600px) {
    overflow-x:auto;

    ul {
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
      width: 100%;
      -ms-text-overflow: "...";
      text-overflow: "...";
      min-height: none;

      li {
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        width: 100%;               /* For old syntax, otherwise collapses. */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1;              /* IE 10 */
        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }

    }


  }

  a {
    outline: 0;
    position:relative;
    text-decoration:none;
    display:block;
    padding: 0 16px;
    height: 48px;
    text-align:center;
    line-height: 48px;
    font-weight: bold;
    font-size: 14px;
    opacity: 0.7;
    overflow:hidden;
    span {
      position:absolute;
      margin-left:-40px;
      margin-top:-24px;
      width: 80px;
      height:100%;
      display:block;
      border-radius:50%;
      opacity:0;
    }
    span.tabclicked {
      animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;
      -webkit-animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;
      -moz-animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;
      // border-bottom:2px solid $default-tab-effect;
    }

    @media only screen
    and (min-width : 320px)
    and (max-width : 600px) {
      padding: 0 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  }

  .is-active a {
    color: $default-tab-color;
    opacity: 1;
    &:after {
      height:4px;
      width:100%;
      display: block;
      content:" ";
      bottom:0px;
      left:0px;
      position:absolute;
      background: $default-tab-underline;
      animation: underline-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
      -webkit-animation: underline-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
      -moz-animation: underline-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
      transition:all 1s cubic-bezier(0.4, 0.0, 1, 1);
    }
  }

}


.sn-tab__tabbox {
  display:none;
  overflow:auto;
  position:relative;
  overflow-x:hidden;
  padding-bottom: 4px;
}

.sn-tab__tabbox.is-visible {
  display:block;
}




// LIGHT THEME COLOR

.sn-tabs__dark ul li a {
  color: $default-tab-dark-color;
}

.sn-tabs__dark .is-active a {
  color: $default-tab-dark-selected;
}

.sn-tabs__dark .is-active a:after {
  background: $default-tab-dark-underline;
}


@-webkit-keyframes expand {
  0% {
    background:transparentize($default-tab-effect, 1);
    opacity:1;
    border-radius:100%;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform:scale(0);
  }
  50% {
    background:transparentize($default-tab-effect, 0.8);
    opacity:0.8;
    border-radius:50%;
  }
  100% {
    background:transparentize($default-tab-effect, 0);
    border-radius: 0;
    transform: scale(3);
    -webkit-transform: scale(3);
    -moz-transform:scale(3);
    opacity:0.2;
  }
}
@-moz-keyframes expand {
  0% {
    background:transparentize($default-tab-effect, 1);
    opacity:1;
    border-radius:100%;
    transform: scale(0);
    -moz-transform:scale(0);
  }
  50% {
    background:transparentize($default-tab-effect, 0.8);
    opacity:0.8;
    border-radius:50%;
  }
  100% {
    background:transparentize($default-tab-effect, 0);
    transform: scale(3);
    border-radius: 0;
    -moz-transform:scale(3);
    opacity:0.2;
  }
}
@-webkit-keyframes underline-expand {
  0% {
    opacity:0;
    width:0;
  }
  100% {
    opacity:1;
    width:100%;
  }
}
@-moz-keyframes underline-expand {
  0% {
    opacity:0;
    width:0;
  }
  100% {
    opacity:1;
    width:100%;
  }
}