@import "../lib.less";
@import "../variables/components/tabs.less";

.@{veui-prefix}-tabs {
  @remove-icon-aspect-ratio: 10 / 16;

  position: relative;
  font-size: @veui-tab-font-size-s;

  &-menu {
    display: flex;
    position: relative;
    white-space: nowrap;

    &::before {
      content: "";
      .absolute(_, 0, 0);
      border-bottom: @veui-tab-container-border-width solid @veui-tab-container-separator-color;
    }
  }

  &-list {
    display: flex;
    position: relative;
    max-width: 100%;
    flex-shrink: 1;
    align-self: stretch;
    overflow: hidden;

    button {
      background: none;
      border: none;
      padding: 0;
    }
  }

  &-extra {
    display: flex;
    flex-grow: 1;
    align-items: center;
  }

  &-prev,
  &-next {
    position: absolute;
    margin-top: 3px;
    &[ui~="icon"] {
      font-size: @veui-tab-icon-size-aux;
      color: @veui-tab-icon-next-color;
    }

    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-tab-icon-size);
    }
  }

  &-next {
    right: @veui-tab-nav-spacing;
  }

  &-prev {
    right: veui-sum(@veui-tab-nav-spacing * 2 + @veui-tab-icon-size-aux);
  }

  &-item {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;

    &-label {
      line-height: @veui-line-height-fixed-s;
      .veui-transition(color);
    }

    & > &-label {
      display: flex;
      align-items: center;
      padding: 0 @veui-tab-padding-x-s;
      text-decoration: none;
      outline: none;
      position: relative;

      &::before {
        content: "";
        .absolute(0, 0, 1px, 0);
        background-color: transparent;
        z-index: -1;
        .veui-transition(background-color);
      }
    }

    &:not(.@{veui-prefix}-disabled) > &-label {
      color: @veui-tab-font-color;

      &::after {
        content: "";
        .absolute(_, 0, 0);
        height: @veui-tab-indicator-width;
        .veui-transition(background-color, height);
      }

      &:hover {
        cursor: pointer;
        color: @veui-tab-font-color-hover;
      }

      &[data-focus-visible-added] {
        color: @veui-tab-font-color-focus;
      }

      &:active {
        color: @veui-tab-font-color-active;
      }
    }

    &-active:not(.@{veui-prefix}-disabled) > &-label {
      color: @veui-tab-font-color-current;

      &::after {
        background-color: @veui-tab-indicator-color;
      }

      &[data-focus-visible-added] {
        color: @veui-tab-font-color-current-focus;
      }

      &:hover {
        color: @veui-tab-font-color-current-hover;
      }

      &:active {
        color: @veui-tab-font-color-current-active;
      }
    }

    &.@{veui-prefix}-disabled > &-label {
      cursor: not-allowed;
      color: @veui-tab-font-color-disabled;
    }

    &-label-content {
      display: flex;
      align-items: center;
      .veui-transition(transform);

      .@{veui-prefix}-icon,
      .veui-icon {
        .veui-icon-size(@veui-tab-icon-size);
      }
    }

    &-removable&-remove-focus &-label-content,
    &-removable &-label[data-focus-visible-added] &-label-content,
    &-removable:hover &-label-content {
      @offset: veui-sum(
        calc(@veui-tab-content-spacing * -0.5),
        calc((1.2em * @remove-icon-aspect-ratio) * -0.5)
      );

      transform: ~"translateX(@{offset})";
    }

    &-remove {
      @offset: veui-sum(
        @veui-tab-padding-x-s,
        calc(@veui-tab-content-spacing * -0.5),
        calc((1.2em * @remove-icon-aspect-ratio) * -0.5)
      );
      .absolute(50%, @offset, _, _);
      transform: translateY(-50%) scale(0.5);
      opacity: 0;
      .veui-transition(transform, opacity);

      .@{veui-prefix}-icon {
        .veui-icon-size(@veui-tab-icon-size-aux);
      }
    }

    &-remove[data-focus-visible-added],
    &-removable &-label[data-focus-visible-added] + &-remove,
    &-removable:hover &-remove {
      opacity: 1;
      transform: translateY(-50%);
    }
  }

  &-item-status {
    margin-left: @veui-tab-content-spacing;
    cursor: pointer;

    .veui-tabs-status(@type) {
      @color-name: ~"veui-color-@{type}-6";
      @color: @@color-name;

      color: @color;
    }

    &-success {
      .veui-tabs-status(success);
    }

    &-warning {
      .veui-tabs-status(warning);
    }

    &-info {
      .veui-tabs-status(info);
    }

    &-error {
      .veui-tabs-status(error);
    }
  }

  &-add.@{veui-prefix}-button {
    flex: 0 0 auto;
    align-self: center;
    color: @veui-tab-font-color;
  }

  &-tip {
    color: @veui-color-gray-9;
  }

  &[ui~="m"] {
    font-size: @veui-tab-font-size-m;
  }
  &[ui~="m"] & {
    &-item-label {
      line-height: @veui-line-height-fixed;
      padding: 0 @veui-tab-padding-x-m;
    }
  }

  &[ui~="normal"] & {
    &-item {
      &-active {
        .@{veui-prefix}-tabs-item-label {
          font-weight: @veui-tab-item-active-font-weight-normal;
        }
      }
      &-label-content {
        margin-bottom: veui-sum(@veui-tab-item-label-bottom-normal, 1px);
      }
    }
    &-list {
      margin-right: veui-sum(@veui-tab-icon-size-aux * 2 + @veui-tab-nav-spacing * 3);
    }
  }

  &[ui~="bordered"],
  &[ui~="bordered-dark"] {
    font-size: @veui-tab-font-size-m;
  }

  &[ui~="bordered"] &,
  &[ui~="bordered-dark"] & {
    &-menu {
      &::before {
        content: none;
      }
      &::after {
        content: none;
      }
    }
    &-list {
      height: @veui-tab-menu-height-bordered;
    }

    &-item {
      &:first-child,
      &:first-child .@{veui-prefix}-tabs-item-label {
        .border-left-radius(@veui-tab-border-radius-primary);
      }

      &:last-child,
      &:last-child .@{veui-prefix}-tabs-item-label {
        .border-right-radius(@veui-tab-border-radius-primary);
      }

      &:not(:first-child) .@{veui-prefix}-tabs-item-label {
        border-left-width: 0;
      }

      & + .@{veui-prefix}-tabs-item {
        position: relative;
        margin-left: 0;
      }

      &-label {
        line-height: @veui-line-height-fixed;
        border: 1px solid @veui-tab-container-separator-color;
        .padding(0, @veui-tab-padding-x-m);
      }

      &:not(.@{veui-prefix}-disabled) .@{veui-prefix}-tabs-item-label {
        &:hover,
        &[data-focus-visible-added] {
          color: @veui-tab-font-color;
          background-color: @veui-tab-background-color-hover-bordered;
        }
        &[data-focus-visible-added] {
          border-left-width: 1px !important;
          .veui-focus-ring();
        }

        &:active {
          color: @veui-tab-font-color;
          background-color: @veui-tab-background-color-active-bordered;
        }
        &::after {
          content: none;
        } 
      }

      &.@{veui-prefix}-disabled > .@{veui-prefix}-tabs-item-label {
        background: @veui-tab-background-color-disabled-bordered;
        border-color: @veui-tab-border-disabled-bordered;
      }

      &-active {
        &:not(.@{veui-prefix}-disabled) {
          .@{veui-prefix}-tabs-item-label {
            background-color: @veui-tab-font-color-current;
            color: @veui-tab-current-color-bordered;
            border-color: @veui-tab-font-color-current;
            &:hover,
            &[data-focus-visible-added] {
              color: @veui-tab-current-color-bordered;
              background-color: @veui-tab-font-color-current-hover;
              border-color: @veui-tab-font-color-current-hover;
            }
            &[data-focus-visible-added] {
              .veui-focus-ring();
            }
            &:active {
              color: @veui-tab-current-color-bordered;
              background-color: @veui-tab-font-color-current-active;
              border-color: @veui-tab-font-color-current-active;
            }
            &::after {
              content: none;
            }
          }
        }
        &.@{veui-prefix}-disabled .@{veui-prefix}-tabs-item-label {
          color: @veui-tab-current-color-bordered;
          background-color: @veui-tab-current-color-disabled-bordered;
          border-color: @veui-tab-current-color-disabled-bordered;
        }
      }
    }
  }

  &[ui~="bordered"] & {
    &-item {
      &:not(.@{veui-prefix}-disabled) .@{veui-prefix}-tabs-item-label {
        &:hover,
        &[data-focus-visible-added] {
          border-left-width: 1px !important;
          color: @veui-tab-active-font-color-bordered;
          border-color: @veui-tab-active-border-color-bordered;
          background-color: @veui-tab-active-backgroud-color-bordered;
        }
        &[data-focus-visible-added] {
          border-left-width: 1px !important;
          .veui-focus-ring();
        }

        &:active {
          color: @veui-tab-active-font-color-active-bordered;
          background-color: @veui-tab-active-backgroud-color-active-bordered;
          border-color: @veui-tab-active-border-color-active-bordered;
        }
        &::after {
          content: none;
        }
      }

      &.@{veui-prefix}-disabled > .@{veui-prefix}-tabs-item-label {
        background: @veui-tab-background-color-disabled-bordered;
        border-color: @veui-tab-border-disabled-bordered;
      }

      &-active {
        &:not(.@{veui-prefix}-disabled) {
          .@{veui-prefix}-tabs-item-label {
            border-left-width: 1px;
            background-color: @veui-tab-active-backgroud-color-bordered;
            color: @veui-tab-active-font-color-bordered;
            border-color: @veui-tab-active-border-color-bordered;
            &:hover,
            &[data-focus-visible-added] {
              color: @veui-tab-active-font-color-hover-bordered;
              background-color: @veui-tab-active-backgroud-color-hover-bordered;
              border-color: @veui-tab-active-border-color-hover-bordered;
            }
            &[data-focus-visible-added] {
              .veui-focus-ring();
            }
            &:active {
              color: @veui-tab-active-font-color-active-bordered;
              background-color: @veui-tab-active-backgroud-color-active-bordered;
              border-color: @veui-tab-active-border-color-active-bordered;
            }
            &::after {
              content: none;
            }
          }
        }
        &.@{veui-prefix}-disabled .@{veui-prefix}-tabs-item-label {
          color: @veui-tab-current-color-bordered;
          background-color: @veui-tab-current-color-disabled-bordered;
          border-color: @veui-tab-current-color-disabled-bordered;
        }
      }
    }
  }

  &[ui~="primary"] {
    font-size: @veui-tab-font-size-m;
  }
  &[ui~="primary"] & {
    &-menu {
      &::after {
        bottom: 0;
        left: @veui-tab-menu-boxshadow-padding;
      }
    }

    &-list {
      .margin(-@veui-tab-menu-boxshadow-padding);
      .padding(@veui-tab-menu-boxshadow-padding);
      height: @veui-tab-menu-height-primary;
    }

    &-item {
      &:first-child,
      &:first-child .@{veui-prefix}-tabs-item-label {
        .border-top-left-radius(@veui-tab-border-radius-primary);
      }

      &:last-child,
      &:last-child .@{veui-prefix}-tabs-item-label {
        .border-top-right-radius(@veui-tab-border-radius-primary);
      }

      &:last-child {
        border-right: 1px solid @veui-tab-container-separator-color;
      }

      & + .@{veui-prefix}-tabs-item {
        margin-left: 0;
      }

      &-label {
        line-height: @veui-line-height-fixed;
        border: 1px solid @veui-tab-container-separator-color;
        border-right: 0 none;
        .padding(0 @veui-tab-padding-x-m);
        background-color: @veui-tab-background-color-primary;
        .veui-transition(color, background-color);

        // &::before,
        &::after {
          content: none;
        }

        &:hover,
        &[data-focus-visible-added] {
          color: @veui-tab-font-color;
          background-color: @veui-tab-background-color-hover-primary;
        }

        &[data-focus-visible-added] {
          .veui-focus-ring();
        }

        &:active {
          color: @veui-tab-font-color;
          background-color: @veui-tab-background-color-active-primary;
        }

        &-content {
          flex-direction: row-reverse;
          .@{veui-prefix}-tabs-item-status {
            margin-left: 0;
            margin-right: @veui-tab-content-spacing;
          }
        }
      }

      &.@{veui-prefix}-disabled &-label {
        background-color: @veui-tab-background-color-disabled-primary;
      }

      &-remove {
        right: @veui-tab-menu-remove-spacing-primary;
        color: @veui-tab-icon-next-color;
      }
    }

    &-add {
      font-size: @veui-tab-font-size-m;
      color: @veui-tab-add-color-primary;
      margin-left: @veui-tab-add-spacing-primary;
    }

    &-item-active {
      .@{veui-prefix}-tabs-item-label {
        border-bottom-color: @veui-tab-background-color-current-primary;
        background-color: @veui-tab-background-color-current-primary;

        &:hover {
          color: @veui-tab-font-color-current-hover;
        }

        &[data-focus-visible-added] {
          color: @veui-tab-font-color-current;
          border-bottom-color: @veui-tab-font-color-current;
        }

        &:active {
          color: @veui-tab-font-color-current-active;
        }

        &::before {
          background-color: @veui-tab-indicator-color;
          top: -1px;
          height: 2px;
          z-index: 1;
        }
      }
    }

    &-panel {
      .clearfix();
      margin-left: @veui-tab-menu-boxshadow-padding;
      margin-right: @veui-tab-menu-boxshadow-padding;
    }
  }
}