// ===================================
//         GroundworkCSS Tabs
// ===================================




.tabs, [role=tabpanel] {
  position:relative;
  > ul, > ol, [role=tablist] {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    &:after {
      content:'';
      display:block;
      clear:both;
    }
    li, [role=tab] {
      display:block;
      float:left;
      margin:0 2px;
      &.pull-right  { float:right; }
      &.pull-left   { float:left; }
      &:first-child {
        margin-left:0;
        a, a:visited {
          &:before {
            display:none;
          }
        }
      }
      a, a:visited {
        display:block;
        position:relative;
        width:100%;
        word-wrap:break-word;
        padding:0.25em 1em;
        background:$button-color;
        border:1px solid $button-color;
        color:$button-text;
        font-weight:bold;
        font-size:1em;
        text-decoration:none;
        text-align:center;
        cursor:pointer;
        line-height:1.5;
        height:2em;
        @include transition(background-color 0.25s ease-out);
        @include rounded($radius $radius 0 0);
        &:hover, &:focus {
          background:$button-active;
          border:1px solid $button-active;
          color:$button-text;
          text-decoration:none;
          &:before {
            box-shadow:2px 1px 0 $button-active;
          }
          &:after {
            box-shadow:-2px 1px 0 $button-active;
          }
        }
        &.active, &.active:hover, &.active:focus {
          background:$button-active;
          border:1px solid $button-active;
          color:$button-text;
          z-index:2;
          &:before {
            box-shadow:2px 1px 0 $button-active;
          }
          &:after {
            box-shadow:-2px 1px 0 $button-active;
          }
        }
        &.disabled {
          @include state(disabled,normal,desaturate($button-color,20%));
          border-bottom-color:lighten(desaturate($button-color,20%), 15%) !important;
          &:before {
            box-shadow:2px 1px 0 lighten(desaturate($button-color,20%), 15%);
          }
          &:after {
            box-shadow:-2px 1px 0 lighten(desaturate($button-color,20%), 15%);
          }
        }
        &:before, &:after {
          position:absolute;
          bottom:-1px;
          width:6px;
          height:6px;
          content:'';
        }
        &:before {
          left:-6px;
          border-bottom-right-radius:6px;
          border-width:0 1px 1px 0;
          box-shadow:2px 1px 0 $button-color;
        }
        &:after {
          right:-6px;
          border-bottom-left-radius:6px;
          border-width:0 0 1px 1px;
          box-shadow:-2px 1px 0 $button-color;
        }
      }
    }
  }
  [role=tablist] {
    background:none;
  }
  > div, [role=tabpanel] {
    display:none;
    padding:$gutter * 2;
    background:$background-color;
    @include rounded(0 0 $radius $radius);
    *:first-child {
      margin-top:0;
    }
    *:last-child {
      margin-bottom:0;
    }
    &.active {
      display:block;
      border:1px solid $button-active;
    }
  }
  // vertical tabs
  &.vertical {
    > ul, > ol, [role=tablist] {
      height:100%;
      position:absolute;
      width:20%;
      background:$button-active;
      border-bottom:1px solid $button-active;
      @include rounded($radius 0 0 $radius);
      li, [role=tab] {
        float:none;
        margin:0 -1px 0 0;
        &:first-child {
          a, a:visited {
            @include rounded($radius 0 0 0);
          }
        }
        a, a:visited {
          height:auto;
          border-bottom:1px solid $button-active;
          @include rounded(0);
          &:before, &:after {
            display:none !important;
          }
          &.active {
            border-right:none;
            color:$font-color;
            background:$background-color;
            &:hover, &:focus {
              border-right:none;
              color:$font-color;
              background:$background-color;
            }
          }
        }
      }
    }
    > div, [role=tabpanel] {
      position:relative;
      left:20%;
      width:80%;
      @include rounded(0 $radius $radius 0);
    }
  }
}