// @import "../var.scss";

$tabTextActiveColor: $themeColor;
$tabTextHoverColor: #777;
$tabTextColor: #999;

.tabs-container {
  @include card();
  &.common-mode {
    background-color: transparent;
  }
  .tabs-container {
    border-bottom: none;
  }
  &.in-row {
    background-color: #EEE;
    .tab-group {
      display: block;
      .tab {
        .tab-label {
          display: block;
          box-shadow: 0 0 4px rgba(0,0,0,0.2);
          background-color: #FFF;
          border-top: 1px solid transparent;
        }
        &.active {
          .tab-label {
            border-color: $themeColor;
          }
        }
      }
    }
    .tab-content {
      min-height: 100px;
    }
  }
  .tab-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-shadow: inset 0 -1px 1px rgba(#999, 0.1);
    // margin-bottom: 5px;
    .tab {
      color: $tabTextColor;
      cursor: pointer;
      position: relative;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
      // padding: 5px 10px;
      border-radius: 4px 4px 0 0;
      background-color: #fafafa;
      margin-right: 5px;
      box-shadow: inset 0 -1px 1px rgba(#999, 0.1);
      ._close-btn {
        display: inline-block;
        // padding: 5px;
        // line-height: 22px;
        position: absolute;
        top: 50%;
        right: 4px;
        // top: -8px;
        color: #999;
        // background-color: #FFF;
        // box-shadow: 0 3px 3px rgba(#000, 0.2);
        // display: none;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity ease 0.2s;
        &:hover {
          color: $colorRed;
          // background-color: $colorRed;
        }
      }
      &.right {
        align-self: baseline;
      }
      &:hover {
        color: $tabTextHoverColor;
        z-index: 2;
        ._close-btn {
          // display: block;
          // transform: scale(1);
          opacity: 1;
        }
        .tab-label {
          // padding-right: 30px;
          .text {
            transform: translateX(10px);
          }
        }
      }
      &.active {
        color: $tabTextActiveColor;
        background-color: #FFF;
        z-index: 1;
        border-color: #DDD;
        box-shadow: 0 -2px 2px rgba(#777, 0.1);
        .tab-label {
          // border-top-color: $tabTextActiveColor;
          // background-color: rgba(#000, 0.02);
        }
      }
      .tab-label {
        display: inline-block;
        padding: 10px 26px;
        border-top: 1px solid transparent;
      }
    }
  }
  // .tab-content {
  //   overflow-y: auto;
  // }
}