/**
 * css 书写规范
 * https://alidocs.dingtalk.com/i/nodes/Mk5evdR04jBV523gq4AgJQL3x2OlParn
 */
@import '~@cainiaofe/cn-ui-theme-light/token.scss';

$_tab-bar-height: 40px;
$_tab-radius: $radius-large $radius-large 0 0;

.cn-drag-tab {
  &-container {
    height: 100%;
    border-width: $line-thin 0 0 0;
    border-style: solid;
    border-color: $color-white;
  }

  &.cn-next-tabs-wrapped .cn-next-tabs-nav-scroll,
  &.cn-next-tabs-wrapped .cn-next-tabs-tab-inner {
    box-sizing: border-box;
  }

  &.cn-next-tabs-wrapped .cn-next-tabs-tab-inner,
  &.cn-next-tabs-wrapped .cn-next-tabs-tab.active .cn-next-tabs-tab-inner,
  &.cn-next-tabs-wrapped .cn-next-tabs-tab.active {
    border-radius: $_tab-radius;
  }

  &.cn-next-tabs-wrapped .cn-next-tabs-bar {
    height: $_tab-bar-height;
    // 覆盖 Fusion 内部 CSS 变量以匹配设计稿背景色 #f7f5ff
    // 通过 --cnai-drag-tab-bar-bg 暴露给业务覆盖（如深色主题）
    --color-bg-lighter: var(--cnai-drag-tab-bar-bg, #f7f5ff);
  }

  // CNUI cn-tab 在 `.cn-ui-tab.cn-next-tabs-wrapped.cn-next-tabs-top > .cn-next-tabs-bar` 内
  // 用 SCSS 变量 hardcode 了激活 tab 的白色背景（active 本身、::after 分隔条、子标签 .cn-ui-tab-inner-sub）。
  // SCSS 变量在编译期已被替换为字面值，无法被 CSS 变量覆盖，因此此处需针对同一选择器直接接管。
  // 通过 --cnai-drag-tab-content-bg 暴露给业务覆盖，使激活 tab 与内容渐变起点保持一致。
  &.cn-ui-tab.cn-next-tabs-wrapped.cn-next-tabs-top > .cn-next-tabs-bar .cn-next-tabs-tab.active {
    background-color: var(--cnai-drag-tab-content-bg, #fff);

    &::after {
      background-color: var(--cnai-drag-tab-content-bg, #fff);
    }
  }
  &.cn-next-tabs-wrapped .cn-next-tabs-tab {
    height: $_tab-bar-height;
    line-height: 16px;
  }

  &.cn-next-tabs-wrapped .cn-next-tabs-tab-inner {
    height: $_tab-bar-height;
    line-height: 16px;
  }

  &.cn-next-tabs-wrapped .cn-next-tabs-content {
    // 通过 --cnai-drag-tab-content-bg 暴露起始色，结束色保留半透明以维持渐变层叠效果
    background: linear-gradient(
      180deg,
      var(--cnai-drag-tab-content-bg, #fff) 0%,
      var(--cnai-drag-tab-content-bg-end, rgba(255, 255, 255, 0.5)) 44%
    );
  }

  &.cn-next-tabs-wrapped .cn-next-tabs-tab .cn-next-icon:not(.cn-next-tabs-tab-close) {
    margin-right: 0;
  }

  &__sortable-wrapper {
    display: inline-flex;
    align-items: center;
    touch-action: none;
    cursor: grab;

    &--dragging {
      opacity: 0.5;
    }
  }

  &__overlay {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: $s-2 $s-3;
    font-size: $font-size-focus;
    background-color: $color-white;
    color: $color-primary;
    cursor: grabbing;
    border-radius: $radius;
    box-shadow: $shadow-2;

    .cn-next-tabs-tab-inner {
      display: flex;
      align-items: center;
    }

    .cn-next-icon:not(.cn-next-tabs-tab-close) {
      margin-right: $s-1;
    }

    .cn-ui-tab-inner-sub {
      display: none;
    }
  }
}
