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

@mixin tab(
  $color-tab: $color-tab,
  $color-tab-select: $color-tab-select,
  $color-tab-background: $color-tab-background,
  $color-tab-background-select: $color-tab-background-select
) {

  @include auto-text-color($color-tab-background);

  background-color: $color-tab-background;
  padding: $padding-vertical $padding-horizontal;
  position: relative;

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

  &:hover {
    @include auto-text-color($color-tab-background-select);
    background-color: $color-tab-background-select;
    text-decoration: none;

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

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

  &:hover {
    background-color: $color-tab-background-select;
    @include auto-text-color($color-tab-background-select);

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

@mixin tab-list(
  $color-tab: $color-tab,
  $color-tab-select: $color-tab-select,
  $color-tab-background: $color-tab-background,
  $color-tab-background-select: $color-tab-background-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, $color-tab-select, $color-tab-background, $color-tab-background-select);
      }
    }

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


    > a {
      @include tab($color-tab, $color-tab-select, $color-tab-background, $color-tab-background-select);
    }
  }

}
