$tabs-btn-number: 5;      // number of tab navigation links

$tabs-btn-height-S: 60px;   // tab buttons height on small devices
$tabs-btn-width-S: 60px;  // tab button width on small devices

$tabs-btn-height-M: 80px;   // tab buttons height on medium devices
$tabs-btn-width-M: 80px;  // tab button width on medium devices

$tabs-btn-height-L: 60px;   // tab buttons height on large devices
$tabs-btn-width-L: auto;  // tab button width on large devices


.tabset-tabs {
  position: relative;
  width: 90%;
  max-width: $L; // breakpoints inside partials > _layout.scss
  margin: 6em auto 2em auto;
  @include clearfix;

  &::after {
    /* subtle gradient layer on top right - to indicate it's possible to scroll */
    position: absolute;
    top: 0;
    right: 0;
    height: $tabs-btn-height-S; // see variables inside partials > _variables.scss
    width: 50px;
    z-index: 1;
    pointer-events: none;
    @include background(linear-gradient(to left, $color-1, rgba($color-1, 0)));
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;

    .no-cssgradients & {
      display: none;
    }
  }

  &.is-ended::after {
    /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
  }

  nav {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: $business-hub-dark;
    box-shadow: inset 0 -2px 3px rgba(darken($color-1, 30%), .06);
  }

  @include MQ(M) {
    &::after {
      display: none;
    }

    nav {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      box-shadow: inset -2px 0 3px rgba(darken($color-1, 30%), .06);
      z-index: 1;
    }
  }

  //@include MQ(L) {
  //  nav {
  //    position: relative;
  //    float: none;
  //    background: transparent;
  //    box-shadow: none;
  //  }
  //}
}

.tabset-tabs-navigation {
  width: $tabs-btn-width-S * $tabs-btn-number; // see variables inside partials > _variables.scss
  @include clearfix;

  li {
    float: left;
  }

  a {
    position: relative;
    display: block;
    height: $tabs-btn-height-S;
    width: $tabs-btn-width-S;
    text-align: center;
    @include font-size(12px);
    @include font-smoothing;
    font-weight: 700;
    color: $white;
    padding-top: $tabs-btn-height-S - 26px;

    .no-touch &:hover {
      color: $business-hub-dark;
      background-color: $business-hub-primary;
    }

    &.selected {
      background-color: $business-hub-grey !important;
      box-shadow: inset 0 2px 0 $business-hub-grey;
      color: $business-hub-dark;
    }

    &::before {
      /* icons */
      position: absolute;
      top: 12px;
      left: 50%;
      margin-left: -10px;
      display: inline-block;
      height: 20px;
      width: 20px;
      background-image: url('../img/vicons.svg');
      background-repeat: no-repeat;
    }

    &[data-content='inbox']::before {
      background-position: 0 0;
    }

    &[data-content='new']::before {
      background-position: -20px 0;
    }

    &[data-content='gallery']::before {
      background-position: -40px 0;
    }

    &[data-content='store']::before {
      background-position: -60px 0;
    }

    &[data-content='settings']::before {
      background-position: -80px 0;
    }

    &[data-content='trash']::before {
      background-position: -100px 0;
    }

    &[data-content='inbox'].selected::before {
      background-position: 0 -20px;
    }

    &[data-content='new'].selected::before {
      background-position: -20px -20px;
    }

    &[data-content='gallery'].selected::before {
      background-position: -40px -20px;
    }

    &[data-content='store'].selected::before {
      background-position: -60px -20px;
    }

    &[data-content='settings'].selected::before {
      background-position: -80px -20px;
    }

    &[data-content='trash'].selected::before {
      background-position: -100px -20px;
    }
  }

  @include MQ(M) {
    /* move the nav to the left on medium sized devices */
    width: $tabs-btn-width-M;
    float: left;

    a {
      height: $tabs-btn-height-M;
      width: $tabs-btn-width-M;
      padding-top: $tabs-btn-height-M - 34px;

      &.selected {
        box-shadow: inset 2px 0 0 $business-hub-grey;
      }

      &::before {
        top: 22px;
      }
    }
  }

  //@include MQ(L) {
  //  /* tabbed on top on big devices */
  //  width: auto;
  //  background-color: $color-1;
  //  box-shadow: inset 0 -2px 3px rgba(darken($color-1, 30%), .06);
  //
  //  a {
  //    height: $tabs-btn-height-L;
  //    line-height: $tabs-btn-height-L;
  //    width: $tabs-btn-width-L;
  //    text-align: left;
  //    @include font-size(14px);
  //    padding: 0 2.8em 0 4.6em;
  //
  //    &.selected {
  //      box-shadow: inset 0 2px 0 $business-hub-grey;
  //    }
  //
  //    &::before {
  //      top: 50%;
  //      margin-top: -10px;
  //      margin-left: 0;
  //      left: 38px;
  //    }
  //  }
  //}
}

.tabset-content {
  background: $business-hub-grey;

  li {
    display: none;
    padding: 1.4em;


    &.selected {
      display: block;
      @include animation(tabset-fade-in .5s);
    }

    p {
      @include font-size(14px);
      line-height: 1.6;
      color: lighten($color-3, 40%);
      margin-bottom: 2em;
    }
  }

  @include MQ(M) {
    min-height: $tabs-btn-height-M * $tabs-btn-number;

    li {
      padding: 2em 2em 2em 7em;
    }
  }

  //@include MQ(L) {
  //  min-height: 0;
  //
  //  li {
  //    padding: 3em;
  //
  //    p {
  //      @include font-size(16px);
  //    }
  //  }
  //}
}

@include keyframes(tabset-fade-in) {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}