// Tabs

.tab-group {
  margin-top: -1px;
  display: flex;
  border-top: 1px solid #989698;
  border-bottom: 1px solid #989698;
}

.tab-item {
  position: relative;
  flex: 1;
  padding: 3px;
  font-size: 12px;
  text-align: center;
  border-left: 1px solid #989698;
  @include linear-gradient(#b8b6b8, #b0aeb0);

  &:first-child {
    border-left: 0;
  }

  &.active {
    @include linear-gradient(#d4d2d4, #cccacc);
  }

  .icon-close-tab {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 15px;
    height: 15px;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #666;
    opacity: 0;
    transition: opacity .1s linear, background-color .1s linear;
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 10;
  }

  &:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background-color: rgba(0,0,0,.08);
    opacity: 0;
    transition: opacity .1s linear;
    z-index: 1;
  }

  // Okay, I know... this is nuts but...
  &:hover:not(.active):after {
    opacity: 1;
  }

  &:hover .icon-close-tab {
    opacity: 1;
  }

  .icon-close-tab:hover {
    background-color: rgba(0,0,0,.08);
  }
}

.tab-item-fixed {
  flex: none;
  padding: 3px 10px;
}