@import "../lib.less";

.@{veui-prefix}-tabs {
  @remove-icon-size: @dls-tab-icon-size-aux;

  .make-margin-left(@dls-tab-spacing-x-m);
  position: relative;
  font-size: @dls-tab-font-size-m;

  &-menu {
    display: flex;
    position: relative;
    align-items: center;
    white-space: nowrap;
    height: @dls-tab-height-m;

    &::before {
      content: "";
      .absolute(_, 0, 0);
      border-bottom: @dls-tab-container-border-width solid
        @dls-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;
  }

  .make-margin-left(@margin) {
    &-item {
      & + & {
        margin-left: @margin;
      }
    }

    &-tip,
    &:not(&-empty) &-add {
      margin-left: @margin;
    }
  }

  &-prev,
  &-next {
    .margin(_, @dls-tab-nav-spacing-m);

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

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

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

    & > &-label {
      display: flex;
      align-items: center;
      padding: 0 @dls-tab-padding-x-m;
      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: @dls-tab-font-color;

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

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

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

        &::before {
          background-color: @dls-tab-background-color-focus;
        }
      }

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

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

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

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

        &::after {
          background-color: @dls-tab-font-color-current-focus;
        }
      }

      &:hover {
        color: @dls-tab-font-color-current-hover;

        &::after {
          background-color: @dls-tab-font-color-current-hover;
        }
      }

      &:active {
        color: @dls-tab-font-color-current-active;

        &::after {
          background-color: @dls-tab-font-color-current-active;
        }
      }
    }

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

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

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

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

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

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

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

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

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

    .veui-tabs-status(@type) {
      @color-name: ~"dls-foreground-color-@{type}-primary";
      @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: @dls-tab-font-color;
  }

  &-tip {
    color: @dls-foreground-color-neutral-weak;
  }

  &[ui~="l"] {
    .make-margin-left(@dls-tab-spacing-x-l);
    font-size: @dls-tab-font-size-l;
  }

  &[ui~="l"] & {
    &-menu {
      height: @dls-tab-height-l;
    }

    &-item-label {
      padding: 0 @dls-tab-padding-x-l;
    }

    &-prev,
    &-next {
      .margin(_, @dls-tab-nav-spacing-l);
    }
  }

  &[ui~="s"] {
    .make-margin-left(@dls-tab-spacing-x-s);
    font-size: @dls-tab-font-size-s;
  }

  &[ui~="s"] & {
    &-menu {
      height: @dls-tab-height-s;
    }

    &-item-label {
      padding: 0 @dls-tab-padding-x-s;
    }

    &-prev,
    &-next {
      .margin(_, @dls-tab-nav-spacing-s);
    }
  }

  &[ui~="simple"] & {
    &-menu {
      height: auto;

      &::before {
        content: none;
      }
    }

    &-item {
      & + .@{veui-prefix}-tabs-item {
        position: relative;
        margin-left: 1px;
        .centered-line(
          dls-even(dls-line-height(@dls-line-height-1, @dls-font-size-1))
        );

        &::before {
          content: "";
          .absolute(50%, _, _, -1px);
          transform: translateY(-50%);
          .size(1px, @dls-tab-separator-height-simple);
          background-color: @dls-tab-separator-color;
        }
      }

      &-label {
        &::after {
          content: none;
        }
      }
    }
  }

  &[ui~="strong"] & {
    &-menu {
      height: @dls-tab-menu-height-strong-m;
      .padding(
        dls-sum(@dls-tab-menu-height-strong-m, -@dls-tab-height-m),
        @dls-tab-menu-padding-x-strong-m,
        _
      );
      background-color: @dls-tab-menu-background-color-strong;
      .border-top-radius(@dls-tab-container-border-radius-strong-m);
      .border-top-radius(6px);

      &::before {
        content: none;
      }
    }

    &-item {
      height: @dls-tab-height-m;

      & + .@{veui-prefix}-tabs-item {
        margin-left: @dls-tab-spacing-x-strong-m;
      }

      &-label {
        padding: 0 @dls-tab-padding-x-strong-m;
        background-color: @dls-tab-background-color-strong;
        color: @dls-tab-font-color-strong;
        .border-top-radius(@dls-tab-border-radius-strong-m);
        .border-top-radius(10px);
        .veui-transition(color, background-color);

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

        &:hover {
          background-color: @dls-tab-background-color-strong-hover;
          color: @dls-tab-font-color-strong-hover;
        }

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

        &:active {
          background-color: @dls-tab-background-color-strong-active;
          color: @dls-tab-font-color-strong-active;
        }
      }

      &.@{veui-prefix}-disabled .@{veui-prefix}-tabs-item-label {
        &,
        &:hover,
        &[data-focus-visible-added],
        &:active {
          background-color: @dls-tab-background-color-strong-disabled;
          color: @dls-tab-font-color-strong-disabled;
        }
      }

      &-remove {
        @offset: dls-sum(
          @dls-tab-padding-x-strong-m,
          calc(@dls-tab-content-spacing * -0.5),
          calc(@remove-icon-size * -0.5)
        );
        right: @offset;
      }
    }

    &-prev {
      margin-left: dls-sum(
        @dls-tab-nav-spacing-m,
        @dls-tab-menu-padding-x-strong-m * -1
      );
    }

    &-next:last-child {
      margin-right: dls-sum(
        @dls-tab-nav-spacing-m,
        @dls-tab-menu-padding-x-strong-m * -1
      );
    }

    &-item-active {
      .@{veui-prefix}-tabs-item-label {
        background-color: @dls-tab-background-color-strong-current;
        color: @dls-tab-font-color-strong-current;

        &:hover {
          background-color: @dls-tab-background-color-strong-current-hover;
          color: @dls-tab-font-color-strong-current-hover;
        }

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

        &:active {
          background-color: @dls-tab-background-color-strong-current-active;
          color: @dls-tab-font-color-strong-current-active;
        }
      }
    }

    &-panel {
      .clearfix();
      border: 1px solid @dls-tab-container-border-color-strong;
      border-top-style: none;
    }
  }
}