/*
  Tabs
*/

.tabbed {
  $tabs-border-width: 1px;
  $tabs-border-colour: lighten($light-blue, 40%);
  $tabs-padding-horizontal: 16px;
  $tabs-height: 35px;

  ul.tabs {
    @include span-columns(12);
    display: block;
    font-family: $montserrat;
    height: $tabs-height;
    max-height: $tabs-height;
    position: relative;

    li {
      float: left;
      display: block;

      a {
        border: $tabs-border-width solid $tabs-border-colour;
        border-right: 0;
        padding: 0 $tabs-padding-horizontal;
        float: left;
        display: block;
        color: white;
        font-weight: 400;
        line-height: $tabs-height;
        background-color: $blue;

        &:hover {
          cursor: pointer;
        }
      }

      &:first-child a {
        border-radius: $base-border-radius 0 0 0;
      }

      &:last-child a {
        border-right: $tabs-border-width solid $tabs-border-colour;
        border-radius: 0 $base-border-radius 0 0;
      }

      &.activeli {
        z-index: 100;

        a {
          background-color: $light-blue;
        }
      }
    }
  }

  .tabbed-contents {
    @include span-columns(12);  
    border: $tabs-border-width solid $tabs-border-colour;
    border-radius: 0 $base-border-radius $base-border-radius $base-border-radius;
    padding: 20px;
  }

  @for $i from 1 through $grid-columns {
    ul.tabs-#{$i} {
      li {
        @include span-columns($i);
      }
    }
  }
}