@tabs-prefix: ~'@{icecream-prefix}-tabs';

@tabs-underscore-width: @icecream-gap-lg;
@tabs-underscore-height: 2px;

.@{tabs-prefix} {
  display: flex;
  flex-direction: column;

  &&-vertical {
    flex-direction: row;

    > .@{tabs-prefix}-nav {
      flex-direction: column;
      flex: 0 0 auto;
      width: fit-content;
      height: fit-content;
      margin: 0 @icecream-gap-md-x - @icecream-gap-md 0 0;

      > .@{tabs-prefix}-nav-item {
        height: @tabs-underscore-width;
        padding: 0 @icecream-gap-md;
        line-height: @tabs-underscore-width;
      }

      > .@{tabs-prefix}-nav-item + .@{tabs-prefix}-nav-item {
        margin-top: @icecream-gap-sm;
      }

      > .@{tabs-prefix}-nav-underscore {
        width: @tabs-underscore-height;
      }

      > .@{tabs-prefix}-nav-border {
        top: 0px;
        left: 0px;
        width: 1px;
        height: 100%;
      }

      > .@{tabs-prefix}-nav-extra {
        justify-content: center;
      }
    }

    > .@{tabs-prefix}-pane {
      margin: 0;
    }

    &.@{tabs-prefix}-small {
      > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-item {
        height: @tabs-underscore-width;
        line-height: @tabs-underscore-width;

        & + .@{tabs-prefix}-nav-item {
          margin-top: @icecream-gap-xs;
        }
      }
    }

    &.@{tabs-prefix}-large {
      > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-item {
        height: @tabs-underscore-width;
        line-height: @tabs-underscore-width;

        & + .@{tabs-prefix}-nav-item {
          margin-top: @icecream-gap-md;
        }
      }
    }
  }

  &&-button {
    > .@{tabs-prefix}-nav {
      > .@{tabs-prefix}-nav-item {
        flex: 0 0 auto;
        padding: 0 @icecream-gap-md;
        margin-right: -1px;
        // 这种 tab 长得像按钮，所以用表单高度
        height: @icecream-form-input-height-md;
        line-height: @icecream-form-input-height-md;
        border: @icecream-border-width solid @icecream-color-grey-7;

        &-active {
          border-bottom-color: transparent;
        }
      }

      > .@{tabs-prefix}-nav-underscore {
        top: 0;
        transition: none;
      }
    }

    &.@{tabs-prefix}-small {
      > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-item {
        padding: 0 @icecream-gap-sm;
        height: @icecream-form-input-height-sm;
        line-height: @icecream-form-input-height-sm;
      }
    }

    &.@{tabs-prefix}-large {
      > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-item {
        padding: 0 @icecream-gap-lg;
        font-size: @icecream-font-size-lg;
        height: @icecream-form-input-height-lg;
        line-height: @icecream-form-input-height-lg;
      }
    }
  }

  &-nav {
    .extendBaseEnhanced();

    position: relative;
    display: flex;
    padding: 0;

    &-item {
      .extendBaseEnhanced();
      .setFontSize(@icecream-font-size-main);

      height: 48px;
      line-height: 48px;
      padding: 0 @icecream-gap-md;
      list-style: none;
      cursor: pointer;

      &:hover,
      &-active {
        color: @icecream-primary-color;
      }
    }

    &-underscore {
      position: absolute;
      left: 0;
      bottom: 0;
      // 防止被下边框挡住
      z-index: 1;
      height: @tabs-underscore-height;
      list-style: none;
      background: @icecream-primary-color;
      transition: @icecream-transitions;
    }

    &-border {
      .extendBaseEnhanced();

      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: @icecream-border-width;
      list-style: none;
      background-color: @icecream-color-grey-5;
    }

    &-extra {
      .extendBaseEnhanced();

      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: @icecream-gap-md;
      list-style: none;
    }
  }

  &&-small {
    // 不影响嵌套内容
    > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-item {
      .setFontSize(@icecream-font-size-sm);

      height: 36px;
      line-height: 36px;
      padding: 0 @icecream-gap-sm;
    }

    > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-extra {
      margin-right: @icecream-gap-sm;
    }
  }

  &&-large {
    // 不影响嵌套内容
    > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-item {
      .setFontSize(@icecream-font-size-lg);

      height: 64px;
      line-height: 64px;
      padding: 0 @icecream-gap-lg;
    }

    > .@{tabs-prefix}-nav > .@{tabs-prefix}-nav-extra {
      margin-right: @icecream-gap-lg;
    }
  }

  &-pane {
    flex: 1;
    margin-top: @icecream-gap-md-x;
    overflow: auto;
  }
}