// Tabs
$tab-bg                              : white !default;
$tab-active-bg                       : white !default;
$tab-hover                           : $dark-grey !default;
$tab-color                           : $mid-grey !default;
$tab-accent                          : $light-grey !default;

$close-color                         : white !default;
$close-text-shadow                   : 0 1px 0 white !default;

.tabs {
  position: relative;

  ul {
    &.tab-header {
      padding: 0;
      margin: 0;
      position: relative;
      top: 2px;

      li {
        list-style-type: none;
        display: inline-block;

        &:last-of-type {
          margin-right: 0;
        }

        a {
          display: block;
          padding: 8px 10px 10px 10px;
          text-decoration: none;
          border: 2px solid $tab-accent;
          border-bottom: 0;
          background-color: $tab-accent;
        }

        &.active {
          a {
            background-color: $tab-active-bg;
          }
        }
      }
    }
  }

  .tab-content {
    padding: 20px;
    border: 2px solid $tab-accent;
    background-color: $tab-bg;
  }
}

.has-tabs {
  ul {
    &.tab-nav {
      padding: 0;
      margin: 0;
      position: relative;
      top: 2px;
      display: inline-block;
      li {
        list-style-type: none;
        display: inline-block;

        &:last-of-type {
          margin-right: 0;
        }
        &.active {
          border-bottom: solid 2px $link-color;
          color: $link-color;
          a {
            color: $link-color;
          }
        }
        a {
          display: block;
          padding: 15px 10px;
          text-decoration: none;
          border-bottom: solid 2px transparent;
          color: $text-muted;

          &:hover {
            color: mix($text-muted, $link-color, 70%);
            border-bottom: solid 2px;
          }

          &.active {
            border-bottom: solid 2px $link-color;
            color: $link-color;
          }
        }
      }
    }
  }

  .right-buttons {
    padding: 12px 0;
  }
}
