@use 'sass:list';
@use '@style/mixins/icon-hover.scss' as icon-hover;
@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:math';
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@style/mixins/index.scss' as *;
@use '@components/tabs/style/token.scss' as token;
@use '@components/tabs/style/token.scss' as *;

$sizes: mini, small, large;

$token-vars: (
  'tabs-size-mini-font-size': $tabs-size-mini-font-size,
  'tabs-size-small-font-size': $tabs-size-small-font-size,
  'tabs-size-large-font-size': $tabs-size-large-font-size,
  'tabs-size-mini-font-size_card': $tabs-size-mini-font-size_card,
  'tabs-size-small-font-size_card': $tabs-size-small-font-size_card,
  'tabs-size-large-font-size_card': $tabs-size-large-font-size_card,
  'tabs-size-mini-font-size_capsule': $tabs-size-mini-font-size_capsule,
  'tabs-size-small-font-size_capsule': $tabs-size-small-font-size_capsule,
  'tabs-size-large-font-size_capsule': $tabs-size-large-font-size_capsule,
  'tabs-size-mini-font-size_rounded': $tabs-size-mini-font-size_rounded,
  'tabs-size-small-font-size_rounded': $tabs-size-small-font-size_rounded,
  'tabs-size-large-font-size_rounded': $tabs-size-large-font-size_rounded,
  'tabs-size-mini-header-height': $tabs-size-mini-header-height,
  'tabs-size-small-header-height': $tabs-size-small-header-height,
  'tabs-size-large-header-height': $tabs-size-large-header-height,
  'tabs-size-mini-header-height_line': $tabs-size-mini-header-height_line,
  'tabs-size-small-header-height_line': $tabs-size-small-header-height_line,
  'tabs-size-large-header-height_line': $tabs-size-large-header-height_line,
  'tabs-size-mini-header-height_capsule': $tabs-size-mini-header-height_capsule,
  'tabs-size-small-header-height_capsule': $tabs-size-small-header-height_capsule,
  'tabs-size-large-header-height_capsule': $tabs-size-large-header-height_capsule,
  'tabs-size-mini-header-height_rounded': $tabs-size-mini-header-height_rounded,
  'tabs-size-small-header-height_rounded': $tabs-size-small-header-height_rounded,
  'tabs-size-large-header-height_rounded': $tabs-size-large-header-height_rounded,
);

@function token-var($name, $fallback: null) {
  $value: map.get($token-vars, $name);

  @if $value == null {
    $value: map.get(meta.module-variables('token'), $name);
  }

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

$tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');

@function get-title-padding($header-height, $font-size, $padding-vertical) {
  // prettier-ignore
  @return max(0, math.round(($header-height * 0.5) - theme.$line-height-base * ($font-size * 0.5) - $padding-vertical));
}

// tabs icon style

@include icon-hover.icon-hover($tabs-prefix-cls, $tabs-size-icon, $tabs-size-icon-bg);

.#{$tabs-prefix-cls} {
  & &-icon-hover {
    color: $tabs-color-icon;
    font-size: $tabs-size-icon;
    user-select: none;
  }

  &-dropdown-icon {
    margin-left: $tabs-spacing-nav-icon-header;
    font-size: $tabs-size-icon;
    user-select: none;
  }

  &-tab-close-btn {
    margin-left: $tabs-margin-close-icon-left;
    user-select: none;
  }

  &-nav-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 $tabs-margin-add-icon-left;
    font-size: $tabs-size-icon;
    user-select: none;
  }

  &-add {
    position: relative;
  }

  &-nav-button {
    &-left {
      margin-right: $tabs-spacing-nav-icon-header;
      margin-left: $tabs-padding-header-wrapper-horizontal;
    }

    &-right {
      margin-right: $tabs-padding-header-wrapper-horizontal;
      margin-left: $tabs-spacing-nav-icon-header;
    }

    &-up {
      margin-bottom: $tabs-padding-header-wrapper-horizontal;
    }

    &-down {
      margin-top: $tabs-padding-header-wrapper-horizontal;
    }

    &-disabled {
      color: $tabs-color-icon_disabled;
      cursor: not-allowed;
    }
  }
}

.#{$tabs-prefix-cls} {
  position: relative;
  overflow: hidden;

  &-nav {
    position: relative;
    flex-shrink: 0;

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      clear: both;
      height: $tabs-line-size-header-border;
      background-color: $tabs-line-color-header-border;
      content: '';
    }
  }

  &-nav-tab {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  &-nav-tab-list {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    transition: transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
  }

  &-nav-extra {
    display: flex;
    align-items: center;
    width: auto;
    line-height: $tabs-size-default-header-height;

    .#{$tabs-prefix-cls}-nav-add-btn {
      padding-left: 0;
    }
  }

  &-tab {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: get-title-padding(
        $tabs-size-default-header-height,
        $tabs-size-default-font-size,
        $tabs-padding-title-text-vertical
      )
      0;
    color: $tabs-color-title-text;
    font-size: $tabs-size-default-font-size;
    line-height: 1.5715;
    outline: none;
    cursor: pointer;
    transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;

    &-title {
      display: inline-block;
    }

    &:hover {
      color: $tabs-color-title-text_hover;
      font-weight: $tabs-line-font-title-text-weight_hover;
    }

    &-disabled,
    &-disabled:hover {
      color: $tabs-color-title-text_disabled;
      cursor: not-allowed;
    }

    &-active,
    &-active:hover {
      color: $tabs-color-title-text_active;
      font-weight: $tabs-line-font-title-text-weight_active;

      &.#{$tabs-prefix-cls}-tab-disabled {
        color: $tabs-color-title-text_disabled_active;
      }
    }
  }

  &-nav-ink {
    position: absolute;
    top: initial;
    right: initial;
    bottom: 0;
    height: $tabs-line-size-ink-stroke;
    background-color: $tabs-line-color-ink-bg;
    transition:
      left theme.$transition-duration-2 theme.$transition-timing-function-standard,
      width theme.$transition-duration-2 theme.$transition-timing-function-standard;

    &.#{$tabs-prefix-cls}-header-ink-no-animation {
      transition: none;
    }

    &-disabled {
      background-color: $tabs-line-color-ink-bg_disabled;
    }
  }
}

// card card-gutter 类型

.#{$tabs-prefix-cls} {
  // type == line
  &-nav-type-line &-nav-extra {
    line-height: $tabs-size-default-header-height_line;
  }

  &-nav-type-line &-tab {
    margin: 0 ($tabs-line-margin-title-horizontal * 0.5);
    padding: get-title-padding(
        $tabs-size-default-header-height_line,
        $tabs-size-default-font-size,
        $tabs-padding-title-text-vertical
      )
      0;
    line-height: 1.5715;

    &-title {
      position: relative;
      display: inline-block;
      padding: $tabs-padding-title-text-vertical 0;

      &::before {
        position: absolute;
        inset: 0 (-$tabs-padding-title-text-horizontal);
        z-index: -1;
        background-color: $tabs-line-color-title-bg;
        border-radius: $tabs-line-border-radius;
        opacity: 1;
        transition:
          background-color theme.$transition-duration-2 theme.$transition-timing-function-standard,
          opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
        content: '';
      }
    }

    &:hover {
      .#{$tabs-prefix-cls}-tab-title::before {
        background-color: $tabs-line-color-title-bg_hover;
      }
    }

    &-active,
    &-active:hover {
      .#{$tabs-prefix-cls}-tab-title::before {
        background-color: $tabs-line-color-title-bg_active;
      }
    }

    &-disabled,
    &-disabled:hover {
      .#{$tabs-prefix-cls}-tab-title::before {
        opacity: 0;
      }
    }

    &:focus-visible {
      .#{$tabs-prefix-cls}-tab-title::before {
        border: 2px solid global.$color-primary-6;
      }
    }
  }

  &-nav-type-line#{&}-nav-horizontal > &-tab:first-of-type {
    margin-left: $tabs-line-margin-title-horizontal_first;
  }

  // headerPadding==false & type === line/text & horizontal
  &-nav-type-line#{&}-nav-horizontal &-nav-tab-list-no-padding > &-tab:first-of-type,
  &-nav-text#{&}-nav-horizontal &-nav-tab-list-no-padding > &-tab:first-of-type {
    margin-left: 0;
  }

  // type == card card-gutter
  &-nav-type-card,
  &-nav-type-card-gutter {
    .#{$tabs-prefix-cls}-tab {
      position: relative;
      padding: get-title-padding(
          ($tabs-size-default-header-height - $tabs-card-border-width * 2),
          $tabs-size-default-font-size_card,
          0
        )
        $tabs-card-padding-title-horizontal;
      font-size: $tabs-size-default-font-size_card;
      border: $tabs-card-border-width solid $tabs-card-color-title-border;
      transition:
        padding theme.$transition-duration-2 theme.$transition-timing-function-standard,
        color theme.$transition-duration-2 theme.$transition-timing-function-standard;

      &-closable {
        padding-right: $tabs-card-padding-title-right_editable;
      }

      &-closable:not(.#{$tabs-prefix-cls}-tab-active):hover
        .#{theme.$prefix}-icon-hover:hover::before {
        background-color: $tabs-card-color-close-icon-bg_hover;
      }

      &:focus-visible::before {
        position: absolute;
        inset: -1px 0 -1px -1px;
        border: 2px solid global.$color-primary-6;
        content: '';
      }

      &:last-child:focus-visible::before {
        right: -1px;
      }
    }
  }

  &-nav-type-card,
  &-nav-type-card-gutter {
    .#{$tabs-prefix-cls}-nav-add-btn {
      height: $tabs-size-default-header-height;
    }
  }

  &-nav-type-card &-tab {
    background-color: $tabs-card-color-title-bg;
    border-right: none;

    &:last-child {
      border-right: $tabs-card-border-width solid $tabs-card-color-title-border;
      border-top-right-radius: $tabs-card-border-radius;
    }

    &:first-child {
      border-top-left-radius: $tabs-card-border-radius;
    }

    &:hover {
      background-color: $tabs-card-color-title-bg_hover;
    }

    &-disabled,
    &-disabled:hover {
      background-color: $tabs-card-color-title-bg_disabled;
    }

    &-active,
    &-active:hover {
      background-color: $tabs-card-color-title-bg_active;
      border-bottom-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
    }
  }

  &-nav-type-card-gutter &-tab {
    margin-left: $tabs-card-gutter-spacing-horizontal;
    background-color: $tabs-card-gutter-color-title-bg;
    border-right: $tabs-card-border-width solid $tabs-card-color-title-border;
    border-radius: $tabs-card-border-radius $tabs-card-border-radius 0 0;

    &:hover {
      background-color: $tabs-card-gutter-color-title-bg_hover;
    }

    &-disabled,
    &-disabled:hover {
      background-color: $tabs-card-gutter-color-title-bg_disabled;
    }

    &-active,
    &-active:hover {
      background-color: $tabs-card-gutter-color-title-bg_active;
      border-bottom-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
    }

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

  // type == text
  &-nav-type-text {
    &::before {
      display: none;
    }

    .#{$tabs-prefix-cls}-tab {
      position: relative;
      margin: 0 ($tabs-text-margin-title-horizontal + ($tabs-text-size-separator-width * 0.5));
      padding: get-title-padding(
          $tabs-size-default-header-height_text,
          $tabs-size-default-font-size,
          0
        )
        0;
      font-size: $tabs-size-default-font-size_text;
      line-height: 1.5715;

      &:not(:first-of-type)::before {
        position: absolute;
        top: 50%;
        left: -($tabs-text-margin-title-horizontal + ($tabs-text-size-separator-width * 0.5));
        display: block;
        width: $tabs-text-size-separator-width;
        height: $tabs-text-size-separator-height;
        background-color: $tabs-text-color-separator-bg;
        transform: translateY(-50%);
        content: '';
      }

      &-title {
        padding-right: $tabs-text-margin-title-horizontal;
        padding-left: $tabs-text-margin-title-horizontal;
        background-color: $tabs-text-color-title-bg;
      }

      &-title:hover {
        background-color: $tabs-text-color-title-bg_hover;
      }

      &-active {
        .#{$tabs-prefix-cls}-tab-title,
        .#{$tabs-prefix-cls}-tab-title:hover {
          background-color: $tabs-text-color-title-bg_active;
        }
      }

      &-disabled {
        .#{$tabs-prefix-cls}-tab-title,
        .#{$tabs-prefix-cls}-tab-title:hover {
          background-color: $tabs-text-color-title-bg_disabled;
        }
      }

      &-active#{&}-disabled {
        .#{$tabs-prefix-cls}-tab-title,
        .#{$tabs-prefix-cls}-tab-title:hover {
          background-color: $tabs-text-color-title-bg_disabled_active;
        }
      }

      &:focus-visible {
        .#{$tabs-prefix-cls}-tab-title {
          margin: -2px;
          border: 2px solid global.$color-primary-6;
        }
      }
    }
  }

  &-nav-type-rounded {
    &::before {
      display: none;
    }

    .#{$tabs-prefix-cls}-tab {
      margin: 0 ($tabs-rounded-margin-title-horizontal * 0.5);
      padding: get-title-padding(
          $tabs-size-default-header-height_rounded,
          $tabs-size-default-font-size_rounded,
          0
        )
        0;
      padding-right: $tabs-rounded-padding-title-horizontal;
      padding-left: $tabs-rounded-padding-title-horizontal;
      font-size: $tabs-size-default-font-size_rounded;
      background-color: $tabs-rounded-color-title-bg;
      border-radius: $tabs-size-default-header-height_rounded;

      &:hover {
        background-color: $tabs-rounded-color-title-bg_hover;
      }

      &-disabled:hover {
        background-color: $tabs-rounded-color-title-bg_disabled;
      }

      &-active,
      &-active:hover {
        background-color: $tabs-rounded-color-title-bg_active;
      }

      &:focus-visible {
        border-color: global.$color-primary-6;
      }
    }
  }

  &-nav-type-capsule {
    &::before {
      display: none;
    }

    .#{$tabs-prefix-cls}-nav-tab:not(.#{$tabs-prefix-cls}-nav-tab-scroll) {
      justify-content: flex-end;
    }

    .#{$tabs-prefix-cls}-nav-tab-list {
      padding: $tabs-capsule-padding-header-vertical $tabs-capsule-padding-header-horizontal;
      line-height: 1;
      background-color: $tabs-capsule-color-header-bg;
      border-radius: $tabs-capsule-border-header-radius;
    }

    .#{$tabs-prefix-cls}-tab {
      position: relative;
      padding: 0 $tabs-capsule-padding-title-horizontal - 2;
      font-size: $tabs-size-default-font-size_capsule;
      line-height: (
        $tabs-size-default-header-height_capsule - $tabs-capsule-padding-header-vertical * 2
      );
      background-color: $tabs-capsule-color-title-bg;

      &:hover {
        background-color: $tabs-capsule-color-title-bg_hover;
      }

      &-disabled:hover {
        background-color: unset;
      }

      &-active,
      &-active:hover {
        background-color: $tabs-capsule-color-title-bg_active;

        &::before,
        & + .#{$tabs-prefix-cls}-tab::before {
          opacity: 0;
        }
      }

      &:focus-visible {
        border-color: global.$color-primary-6;
      }
    }

    &.#{$tabs-prefix-cls}-nav-horizontal .#{$tabs-prefix-cls}-tab:not(:first-of-type) {
      margin-left: $tabs-capsule-margin-title-horizontal;

      &::before {
        position: absolute;
        top: 50%;
        left: -($tabs-capsule-margin-title-horizontal * 0.5) -
          ($tabs-capsule-size-separator-width * 0.5) - 2;
        display: block;
        width: $tabs-capsule-size-separator-width;
        height: $tabs-capsule-size-separator-height;
        background-color: $tabs-capsule-color-separator-bg;
        transform: translateY(-50%);
        transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
        content: '';
      }
    }
  }
}

//   /** header */

.#{$tabs-prefix-cls} {
  &-nav {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    padding-top: $tabs-content-padding;
    overflow: hidden;

    &-hide {
      display: none;
    }

    .#{$tabs-prefix-cls}-content-list {
      display: flex;
      width: 100%;
    }

    .#{$tabs-prefix-cls}-content-item {
      flex-shrink: 0;
      width: 100%;
      height: 0;
      overflow: hidden;

      &.#{$tabs-prefix-cls}-content-item-active {
        height: auto;
      }
    }
  }

  &-type-card,
  &-type-card-gutter {
    > .#{$tabs-prefix-cls}-content {
      border: $tabs-card-border-content-width solid $tabs-line-color-header-border;
      border-top: none;
    }
  }

  &-content-animation {
    transition: margin theme.$transition-duration-2 theme.$transition-timing-function-standard;
  }

  &-horizontal#{&}-justify {
    display: flex;
    flex-direction: column;
    height: 100%;

    .#{$tabs-prefix-cls}-content,
    .#{$tabs-prefix-cls}-content-list,
    .#{$tabs-prefix-cls}-pane {
      height: 100%;
    }
  }
}

// full-height：撑满父容器高度（仅水平方向），内容区域自动滚动
.#{$tabs-prefix-cls}-horizontal.#{$tabs-prefix-cls}-full-height {
  display: flex;
  flex-direction: column;
  height: 100%;

  > .#{$tabs-prefix-cls}-nav {
    flex-shrink: 0;
  }

  .#{$tabs-prefix-cls}-content {
    flex: 1;
    min-height: 0;
  }

  .#{$tabs-prefix-cls}-content-list {
    height: 100%;
  }

  .#{$tabs-prefix-cls}-content-item-active {
    height: 100%;
  }

  .#{$tabs-prefix-cls}-pane {
    height: 100%;
    overflow: auto;
  }

  // scrollbar !== false：使用 Scrollbar 组件，pane 不再原生滚动
  .#{$tabs-prefix-cls}-pane-scroll {
    overflow: hidden;
  }

  .#{$tabs-prefix-cls}-pane-scrollbar {
    height: 100%;
  }
}

@mixin for($data, $i: 1) {
  @if ($i <= list.length($data)) {
    $size: list.nth($data, $i);

    .#{$tabs-prefix-cls}-nav-size-#{$size} {
      &.#{$tabs-prefix-cls}-nav-type-line {
        $height: string.unquote('tabs-size-#{$size}-header-height_line');
        $font-size: string.unquote('tabs-size-#{$size}-font-size');
        $padding: get-title-padding(
          token-var($height),
          token-var($font-size),
          $tabs-padding-title-text-vertical
        );

        .#{$tabs-prefix-cls}-nav-extra {
          font-size: token-var($font-size);
          line-height: token-var($height);
        }

        .#{$tabs-prefix-cls}-tab {
          padding-top: $padding;
          padding-bottom: $padding;
          font-size: token-var($font-size);
        }

        .#{$tabs-prefix-cls}-nav-extra {
          font-size: token-var($font-size);
          line-height: token-var($height);
        }
      }

      &.#{$tabs-prefix-cls}-nav-type-card,
      &.#{$tabs-prefix-cls}-nav-type-card-gutter {
        $card-font-size: string.unquote('tabs-size-#{$size}-font-size_card');
        $card-height: string.unquote('tabs-size-#{$size}-header-height');
        $padding: get-title-padding(
          token-var($card-height) - $tabs-card-border-width * 2,
          token-var($card-font-size),
          $tabs-padding-title-text-vertical
        );

        .#{$tabs-prefix-cls}-tab {
          padding-top: $padding;
          padding-bottom: $padding;
          font-size: token-var($card-font-size);
        }

        .#{$tabs-prefix-cls}-nav-extra {
          font-size: token-var($card-font-size);
          line-height: token-var($card-height);
        }

        .#{$tabs-prefix-cls}-nav-add-btn {
          height: token-var($card-height);
        }
      }

      &.#{$tabs-prefix-cls}-nav-type-capsule {
        $capsule-font-size: string.unquote('tabs-size-#{$size}-font-size_capsule');
        $capsule-height: string.unquote('tabs-size-#{$size}-header-height_capsule');

        .#{$tabs-prefix-cls}-tab {
          font-size: token-var($capsule-font-size);
          line-height: token-var($capsule-height) - $tabs-capsule-padding-header-vertical * 2;
        }

        .#{$tabs-prefix-cls}-nav-extra {
          font-size: token-var($capsule-font-size);
          line-height: token-var($capsule-height);
        }
      }

      &.#{$tabs-prefix-cls}-nav-type-rounded {
        $rounded-font-size: string.unquote('tabs-size-#{$size}-font-size_rounded');
        $rounded-height: string.unquote('tabs-size-#{$size}-header-height_rounded');

        .#{$tabs-prefix-cls}-tab {
          padding-top: get-title-padding(
            token-var($rounded-height),
            token-var($rounded-font-size),
            0
          );
          padding-bottom: (
            get-title-padding(token-var($rounded-height), token-var($rounded-font-size), 0)
          );
          font-size: token-var($rounded-font-size);
        }

        .#{$tabs-prefix-cls}-nav-extra {
          font-size: token-var($rounded-font-size);
          line-height: token-var($rounded-height);
        }
      }
    }

    @include for($data, ($i + 1));
  }
}

@include for($sizes);
@include meta.load-css('./vertical.scss');
@include meta.load-css('./rtl.scss');

#{global.$sd-theme-tag}[sd-theme='dark'] {
  .#{$tabs-prefix-cls}-nav-type-capsule {
    .#{$tabs-prefix-cls}-tab {
      &-active {
        background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
      }

      &:hover {
        background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
      }
    }
  }
}