// ===================================
//          Groundwork Tabs
// ===================================




.tabs {
  position:relative;
  > ul {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    &:after {
      content:'';
      display:block;
      clear:both;
    }
    li {
      display:block;
      float:left;
      margin:0 2px;
      &.pull-right  { float:right; }
      &.pull-left   { float:left; }
      &:first-child {
        margin-left:0;
        a {
          &:before {
            display:none;
          }
        }
      }
      a {
        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;
          @include filter-shadow(rgba(0,0,0,0.25), 5px, 0, 0);
          &:before {
            box-shadow:2px 1px 0 $button-active;
          }
          &:after {
            box-shadow:-2px 1px 0 $button-active;
          }
        }
        &.disabled {
          background:lighten(gray, 15%);
          color:lighten(gray, 35%);
          cursor:not-allowed;
          border-color:lighten(gray, 15%);
          &:before {
            box-shadow:2px 1px 0 lighten(gray, 15%);
          }
          &:after {
            box-shadow:-2px 1px 0 lighten(gray, 15%);
          }
          &:hover, &:focus {
            background:lighten(gray, 15%);
            border:1px solid lighten(gray, 15%);
            color:lighten(gray, 35%);
            &:before {
              box-shadow:2px 1px 0 lighten(gray, 15%);
            }
            &:after {
              box-shadow:-2px 1px 0 lighten(gray, 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;
        }
      }
    }
  }
  > div {
    display:none;
    padding:$gutter * 2;
    *:first-child {
      margin-top:0;
    }
    *:last-child {
      margin-bottom:0;
    }
    &.active {
      display:block;
      border:1px solid $button-active;
    }
  }
}