/* 
 * tabs
 */
@import "./var";
.#{$prefix}tabs {
  color: $color-text;
}

.#{$prefix}tabs__tabbar {
  position: relative;
  display: flex;
}

.#{$prefix}tabs__tabbar::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid $tabs-color-border-inner;
}

.#{$prefix}tabs__tablist {
  position: relative;
  font-size: 0;
  display: inline-block;
  min-width: 100%;
}

.#{$prefix}tabs__tabitem {
  display: inline-block;
  margin-right: 20px;
  font-size: $tabs-font-size-l;
  height: $tabs-height;
  line-height: $tabs-height;
  position: relative;
}

.#{$prefix}tabs__tabitem:last-child {
  margin-right: 0;
}

.#{$prefix}tabs__tab {
  display: inline-block;
  height: 100%;
  padding: 0 10px;
  color: $tabs-color-text-weight;
  position: relative;
}

.#{$prefix}tabs__tab:hover {
  text-decoration: none;
}

/* TODO: focus态
.#{$prefix}tabs__tab.is-focused,
.#{$prefix}tabs__tab:focus {
    background-color: rgba(0, 0, 0, .05);
    outline: 0;
}
*/

.#{$prefix}tabs__tab.is-active {
  font-weight: bold;
}

.#{$prefix}tabs__tab.is-disabled {
  cursor: not-allowed;
  color: $tabs-color-text-disabled;
}

.#{$prefix}tabs__tab::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0;
  border-bottom: 2px solid transparent;
}

.#{$prefix}tabs__tab:hover::after,
.#{$prefix}tabs__tab.is-active::after {
  width: 100%;
  border-bottom-color: $tabs-primary-color-border;
  transition: border-color 0.15s ease-in-out, width 0.15s ease-in-out, height 0.15s ease-in-out;
}

.#{$prefix}tabs__tab.is-disabled:hover::after {
  border-bottom: 2px solid transparent;
}

.#{$prefix}tabs__tabpanel {
  padding-top: 10px;
  padding-bottom: 10px;
}

.#{$prefix}tabs__tabpanel.is-active {
}

// 删除tab按钮
.#{$prefix}tabs__remove {
  position: absolute;
  top: ($tabs-height - 16px)/2;
  right: -8px;
  font-size: 0;
  line-height: 1;
  display: none;
}

.#{$prefix}tabs__tabitem:hover .#{$prefix}tabs__remove {
  display: inline-block;
}

/* 右侧含有附加操作 */

.#{$prefix}tabs__addons {
  // position: absolute;
  // bottom: 0;
  // right: 0;
  // height: 100%;
  display: flex;
  justify-content: flex-end;
}

.#{$prefix}tabs__addons::before {
  // content: "";
  // display: inline-block;
  // vertical-align: middle;
  // height: 100%;
  // width: 0;
}

.#{$prefix}tabs__addons .#{$prefix}pagination {
  display: inline-block;
  vertical-align: middle;
}

/* 水平可滚动 */

// 翻页
.#{$prefix}tabs__backward,
.#{$prefix}tabs__forward {
  display: none;
  padding: 6px 7px;
  position: absolute;
  bottom: 0;
  background-color: $tabs-color-bg;
  border: 0 none;
  border-bottom: 1px solid $tabs-color-border-inner;
}

.#{$prefix}tabs__backward:hover,
.#{$prefix}tabs__forward:hover,
.#{$prefix}tabs__backward:focus,
.#{$prefix}tabs__forward:focus {
  border-bottom-color: $tabs-color-border-inner;
  background-color: $tabs-color-bg-hover;
}

.#{$prefix}tabs__backward {
  left: 0;
}

.#{$prefix}tabs__forward {
  right: 0;
}

.#{$prefix}tabs__scroll-area {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
}

.#{$prefix}tabs__scroll-area.is-scrolling {
  padding: 0 30px;
}

.#{$prefix}tabs__scroll-area.is-scrolling .#{$prefix}tabs__backward,
.#{$prefix}tabs__scroll-area.is-scrolling .#{$prefix}tabs__forward {
  display: inline-block;
}

/* 垂直布局 */

.#{$prefix}tabs--vertical {
  display: table;
  width: 100%;
  & > .#{$prefix}tabs__tabbar {
    display: table-cell;
    vertical-align: top;
    &::before {
      right: 0;
      left: auto;
      top: 0;
      bottom: 0;
      border-bottom: 0 none;
      border-right: 1px solid $tabs-color-border-inner;
    }
    .#{$prefix}tabs__scroll-area {
      white-space: normal;
    }
    .#{$prefix}tabs__tabitem {
      display: block;
      margin-right: 0;
    }
    .#{$prefix}tabs__tab {
      display: block;
      text-align: right;
      padding-left: 0;
      padding-right: 20px;
      max-width: 20em;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .#{$prefix}tabs__tab::after {
      right: 0;
      left: auto;
      top: 0;
      width: auto;
      border-bottom: 0 none;
      border-right: 2px solid transparent;
    }
    .#{$prefix}tabs__tab:hover::after,
    .#{$prefix}tabs__tab.is-active::after {
      border-right-color: $tabs-primary-color-border;
    }
    .#{$prefix}tabs__tab.is-disabled:hover::after {
      border-right: 2px solid transparent;
    }
    .#{$prefix}tabs__remove {
      right: 3px;
    }
    // 垂直滚动
    .#{$prefix}tabs__scroll-area.is-scrolling {
      padding: 30px 0;
    }
    .#{$prefix}tabs__backward,
    .#{$prefix}tabs__forward {
      border: 0 none;
      border-right: 1px solid $tabs-color-border-inner;
      left: 0;
      width: 100%;
    }
    .#{$prefix}tabs__backward {
      top: 0;
      bottom: auto;
    }
    .#{$prefix}tabs__forward {
      top: auto;
      bottom: 0;
    }
  }
  & > .#{$prefix}tabs__tabpanel {
    display: table-cell;
    width: 100%;
    padding: 0 20px;
    vertical-align: top;
  }
}

/*带边框 用于多级选择器*/
.#{$prefix}tabs--bordered .#{$prefix}tabs__tabitem {
  border: 1px solid $tabs-color-border;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: 0;
}
.#{$prefix}tabs--bordered .#{$prefix}tabs__tab:hover::after {
  border-bottom: 2px solid transparent;
}
.#{$prefix}tabs--bordered .#{$prefix}tabs__tab.is-active::after {
  border-bottom-color: $tabs-color-bg;
}
.#{$prefix}tabs--bordered .#{$prefix}tabs__tab::after {
  bottom: -1px;
}
.#{$prefix}tabs--bordered .#{$prefix}tabs__tab.is-disabled:hover::after {
  border-bottom: 2px solid transparent;
}
.#{$prefix}tabs--bordered .#{$prefix}tabs__tab {
  padding: 0 20px;
}

// 主要用于标题下吸顶的tab
.#{$prefix}tabs.#{$prefix}tabs--ceiling {
  margin-top: $tabs-ceiling-margin-top;

  > .#{$prefix}tabs__tabbar {
    background-color: $tabs-ceiling-color-bg;
    padding: 0 20px;
    position: absolute;
    left: 0;
    right: 0;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: -1px;
      width: $tabs-ceiling-gap;
      background-color: $color-bg-second;
    }
  }
  > .#{$prefix}tabs__tabpanel {
    padding-top: $tabs-ceiling-tabpanel-padding-top;
  }
}

// 用途卡片顶部出现tab时，需要拉通的情况。
.#{$prefix}tabs.#{$prefix}tabs--full {
  > .#{$prefix}tabs__tabbar {
    margin: 0 -20px;
    padding: 0 20px;
  }
}