$color-tab: $color-gray-dark !default;
$color-tab-select: $color-primary !default;
$color-tab-hover: $color-tab-select !default;

@mixin tab($color-tab: $color-tab) {

  @include no-link();

  padding: $padding-vertical $padding-horizontal;
  background-color: $color-content-background;
  color: $color-text;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    background-color: $color-tab;
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &:hover:before {
    background-color: $color-tab-hover;
  }


}

@mixin tab-select($color-tab-select: $color-tab-select) {
  @include tab($color-tab-select);
}

@mixin tab-list($color-tab: $color-tab, $color-tab-select: $color-tab-select) {
  @include list-horizontal();

  position: relative;

  &:before {
    content: "";
    position: absolute;
    background-color: $color-tab;
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: visible;
  }

  > li {

    &:first-child > a {
      padding-left: $padding-horizontal;
    }

    &:last-child > a {
      padding-right: $padding-horizontal;
    }

    &.selected {
      > a {
        @include tab-select($color-tab-select);
      }
    }
    > a {
      @include tab($color-tab);
    }
  }

}
