@import "ui-variables";
@import "ui-mixins";

.tab-bar {
  height: @tab-height + 6px;
  border-bottom: 4px solid @tab-bar-border-color;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 1px;
  background-color: @tab-bar-background-color;
}

.tab {
  height: @tab-height;
  line-height: @tab-height;
  color: @text-color;
  margin: 0;
  background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 1),
    inset 1px 0 0 @background-color-highlight,
    inset -1px 0 0 @background-color-highlight;
}

.tab:hover {
  color: @text-color-highlight;
}

.tab.active {
  height: @tab-height + 1px;
  background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-bar-border-color);
  color: @text-color-highlight;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.1)
}

.tab.active:hover .close-icon {
  color: @text-color-highlight;
}

// Bootstrap nav tabs.
.nav.nav-tabs {
  border-bottom-color: @tab-background-color-active;

  > li {
    margin-bottom: 0;
  }

  > li > a {
    border: none;
  }

  > li.active > a {
    .text(highlight);
    border: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: @background-color-highlight;
  }
}