@import '../style/theme/color';
@import '../style/core/font';
@import '../style/theme/corner';
@import '../style/core/animation';
@import '../style/theme/shadow';

:host {
  display: block;

  --devui-tab-slider-bg: var(--devui-list-item-hover-bg, #f2f5fc);
  --devui-tab-options-bg: var(--devui-brand, #5e7ce0);
}

body[ui-theme='infinity-theme'] {
  :host {
    --devui-tab-slider-bg: rgba(25, 25, 25, 0.05);
  }
}

.devui-nav-container {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
  background: inherit;

  li {
    cursor: pointer;
    color: $devui-text;
    float: left;
    transition: text-shadow $devui-animation-duration-slow $devui-animation-ease-in-out;

    &.closeable {
      white-space: nowrap;
    }

    & > a {
      display: inline-block;
      height: 100%;
      padding: 0;
      width: max-content;
    }

    &.devui-tab-add-icon {
      svg {
        vertical-align: middle;
        margin-top: -4px;

        polygon {
          fill: $devui-aide-text;
        }
      }

      &:hover svg polygon {
        fill: $devui-text;
      }
    }

    &:not(.active):not(.disabled) > a {
      color: $devui-text;
    }

    &.active,
    &:hover:not(.active):not(.disabled) {
      text-shadow: 0 0 0.4px $devui-brand-active;

      & > a {
        color: $devui-brand-active;
        background-color: transparent;
        border: none;

        &:hover,
        &:focus,
        &:active {
          color: $devui-brand-active;
          outline: none;
        }
      }
    }

    &.disabled > a {
      color: $devui-disabled-text;
      cursor: not-allowed;
    }

    .custom-width {
      text-align: center;
    }

    .devui-tab-close-icon {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      font-size: $devui-font-size-icon;
      width: 12px;
      height: 12px;
      line-height: 12px;
      margin: 0 0 0 12px;
      background-color: $devui-line;
      border-radius: 50%;

      svg path {
        fill: $devui-light-text;
      }

      &:hover {
        background-color: $devui-shape-icon-fill-hover;
        text-decoration: none;
      }
    }
  }

  // lg 容器高度46px
  &.devui-nav-lg {
    font-size: $devui-font-size-lg;

    .devui-nav-tabs > li {
      height: 45px;
      line-height: 45px;
    }

    .devui-nav-pills > li {
      height: 46px;
      line-height: 46px;
    }

    .devui-nav-options > li {
      height: 40px;
      line-height: 40px;
    }

    .devui-nav-slider-animation,
    .devui-nav-slider > li {
      height: 42px;
      line-height: 42px;
    }

    .devui-nav-wrapped {
      &.devui-nav-overflow li.active {
        padding-top: 10px;
      }

      li {
        padding: 11px 16px;
      }
    }
  }

  // md 容器高度28px
  &.devui-nav-md {
    font-size: $devui-font-size-lg;

    .devui-nav-tabs > li {
      height: 27px;
      line-height: 27px;
    }

    .devui-nav-pills > li {
      height: 28px;
      line-height: 28px;
    }

    .devui-nav-options > li {
      height: 22px;
      line-height: 22px;
      font-size: $devui-font-size;
    }

    .devui-nav-slider-animation,
    .devui-nav-slider > li {
      height: 24px;
      line-height: 24px;
      font-size: $devui-font-size;
    }

    // TODO: wrapped类型无视主题高度40px
    .devui-nav-wrapped {
      &.devui-nav-overflow li.active {
        padding-top: 7px;
      }

      li {
        padding: 8px 16px;
      }
    }
  }

  // sm xs 容器高度26px
  &.devui-nav-sm,
  &.devui-nav-xs {
    font-size: $devui-font-size-lg;

    .devui-nav-tabs > li {
      height: 25px;
      line-height: 25px;
    }

    .devui-nav-pills > li {
      height: 26px;
      line-height: 26px;
    }

    .devui-nav-options > li {
      height: 20px;
      line-height: 20px;
      font-size: $devui-font-size;
    }

    .devui-nav-slider-animation,
    .devui-nav-slider > li {
      height: 22px;
      line-height: 22px;
      font-size: $devui-font-size;
    }

    .devui-nav-wrapped {
      &.devui-nav-overflow li.active {
        padding-top: 0;
      }

      li {
        padding: 1px 16px;
      }
    }
  }

  .devui-nav-tabs {
    border-bottom: 1px $devui-dividing-line solid;
  }

  .devui-nav-tabs,
  .devui-nav-pills {
    background: transparent;

    & > li {
      margin-left: 24px;

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

      &::after {
        content: '';
        display: block;
        background: transparent;
        margin: auto;
        position: relative;
        bottom: 1px;
        width: 0;
        height: 2px;
        transition:
          width $devui-animation-duration-slow $devui-animation-ease-in-out,
          background-color $devui-animation-duration-slow $devui-animation-ease-in-out;
      }

      &.active::after {
        width: 100%;
        background: $devui-brand;
      }

      &.devui-tab-add-icon {
        margin-right: 24px;
      }
    }

    &.devui-nav-stacked {
      border: none;

      & > li {
        float: none;
        border: none;
        margin-left: 0;
        height: 36px;
        line-height: 36px;
        font-weight: bold;

        &:not(.active),
        &:not(.disable) {
          & > a {
            color: $devui-text;
          }
        }

        &.active,
        &:hover:not(.disabled) {
          & > a {
            color: $devui-brand;
          }
        }
      }
    }
  }

  .devui-nav-options {
    background: $devui-base-bg;
    border: 1px solid $devui-dividing-line;
    border-radius: $devui-border-radius;
    padding: 2px;

    & > li {
      background-color: $devui-base-bg;
      border-radius: $devui-border-radius;
      transition:
        background-color $devui-animation-duration-slow $devui-animation-ease-in-out,
        text-shadow $devui-animation-duration-slow $devui-animation-ease-in-out;

      & > a {
        padding: 0 16px;
      }

      &.active {
        background-color: var(--devui-tab-options-bg);

        & > a {
          color: $devui-light-text;
          padding: 0 16px;
        }
      }

      &.devui-tab-add-icon {
        border-radius: 0 $devui-border-radius $devui-border-radius 0;
      }

      .devui-tab-close-icon {
        position: relative;
        top: 1px;
        margin: 0 12px 0 -4px;
      }
    }
  }

  .devui-nav-slider {
    border: none;
    border-radius: $devui-border-radius;
    background: var(--devui-tab-slider-bg);
    width: fit-content;
    display: flex;
    align-items: center;
    position: relative;

    & > li {
      margin: 2px;
      position: relative;
      z-index: 1;

      & > a {
        padding: 0 16px;
      }

      .devui-tab-close-icon {
        margin: 0 12px 0 -4px;
      }
    }
  }

  .devui-nav-wrapped {
    background: transparent;
    border-bottom: 1px solid $devui-dividing-line;
    background-color: $devui-base-bg;

    & > li {
      height: auto;
      line-height: 23px;

      &.active {
        background: $devui-global-bg;
        border-radius: $devui-border-radius $devui-border-radius 0 0;
        border: 1px solid $devui-dividing-line;
        border-bottom-color: transparent;
        // 以下覆盖父元素的底部边框,解决多1px的边框造成的抖动
        margin: -1px;
      }
    }

    &.devui-nav-overflow li.active {
      margin-top: 0;
    }
  }

  .devui-nav {
    &::before,
    &::after {
      content: ' ';
      display: table;
    }

    &::after {
      clear: both;
    }

    &.devui-nav-overflow {
      width: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-wrap: nowrap;
    }
  }

  .devui-nav-scroll-ctrl {
    display: flex;
    align-items: stretch;
    width: auto;
    height: inherit;
    // 排除底部border高度，使图标与文字对齐
    padding-bottom: 1px;

    span {
      padding-left: 16px;
      display: flex;
      align-items: center;
      cursor: pointer;

      &:last-child {
        padding: 0 16px;
      }

      svg {
        vertical-align: middle;

        path,
        polygon {
          fill: $devui-aide-text;
        }
      }

      &.disable {
        cursor: not-allowed;

        svg {
          path,
          polygon {
            fill: $devui-disabled-text;
          }
        }
      }
    }

    .devui-nav-more-operate svg {
      transform: rotate(90deg);
    }
  }

  .dev-nav-scroll-container {
    width: calc(100% - 128px);
    height: 100%;
    position: relative;
    overflow: hidden;

    &.devui-nav-shadow {
      &::before,
      &::after {
        content: ' ';
        position: absolute;
        top: -50%;
        width: 100%;
        height: 200%;
        pointer-events: none;
        z-index: 1;
      }

      &::before {
        left: 0;
        box-shadow: inset $devui-shadow-length-slide-right $devui-connected-overlay-shadow;
      }

      &::after {
        right: 0;
        box-shadow: inset $devui-shadow-length-slide-left $devui-connected-overlay-shadow;
      }
    }
  }

  .devui-nav-slider-animation {
    position: absolute;
    z-index: 0;
    background-color: $devui-base-bg;
    border-radius: $devui-border-radius;
    box-shadow: $devui-shadow-length-base $devui-light-shadow;
    top: 2px;
    transition:
      left $devui-animation-duration-slow $devui-animation-ease-in-out,
      width $devui-animation-duration-slow $devui-animation-ease-in-out;
  }
}

.devui-tab-content {
  margin-top: 12px;
}

::ng-deep {
  .devui-nav-dropdown {
    max-height: 240px;
    overflow: auto;

    li {
      padding: 8px 12px;
      line-height: 20px;
      border-radius: $devui-border-radius;
      cursor: pointer;
    }
  }
}
