@import '../../styles/mixins/index';
@import '../tabpane/tabpane.scss';
@import '../icon/icon.scss';

.nut-theme-dark {
  .nut-tabs {
    .nut-tabpane {
      color: $white;
    }

    &__titles {
      background: $dark5;

      &-item {
        color: $dark1;

        &.active {
          color: $dark1;
        }

        &__text {
          color: $dark1;
        }
      }
    }

    &.vertical {
      .nut-tabs__titles {
        &-item {
          &.active {
            background-color: $dark5;
          }
        }
      }
    }
  }
}

.nut-tabs {
  display: flex;

  &.horizontal {
    flex-direction: column;
  }

  &.vertical {
    flex-direction: row;
    width: 100%;

    .nut-tabs__titles {
      box-sizing: border-box;
      flex-direction: column;
      height: 100%;
      padding: 0 !important;
      width: $tabs-vertical-titles-width;
      flex-shrink: 0;

      &.scrollable {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .nut-tabs__titles-item {
        height: $tabs-vertical-titles-item-height;
        flex: none;

        .nut-tabs__titles-item__smile {
          transition: width 0.3s ease;
        }

        .nut-tabs__titles-item__line {
          bottom: none;
          transform: translate(0, -50%);
          transition: height 0.3s ease;
          width: 0;
          height: 0;
        }

        &.active {
          background-color: $tabs-horizontal-titles-item-active-background-color;

          .nut-tabs__titles-item__line {
            left: 10px;
            width: $tabs-vertical-titles-item-active-line-width;
            height: $tabs-vertical-titles-item-active-line-height;
            background: $tabs-vertical-tab-line-color;
          }

          .nut-tabs__titles-item__smile {
            right: -2px;
            bottom: 2px;
            left: auto;
            width: 3px;
            transform: rotate(320deg);
            height: $tabs-vertical-titles-item-active-line-height;
          }
        }
      }
    }

    .nut-tabs__content {
      flex-direction: column;

      &__wrap {
        flex: 1;
      }

      height: 100%;

      .nut-tabpane {
        height: 100%;
      }
    }

    .horizontal {
      .nut-tabs__titles {
        display: flex;
        flex-direction: row;
        padding: 0 !important;
        width: 100%;

        .nut-tabs__titles-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1 0 auto;

          .nut-tabs__titles-item__smile,
          .nut-tabs__titles-item__line {
            position: absolute;
            transition: width 0.3s ease;
            width: 0;
            height: 0;
            content: ' ';
            bottom: $tabs-horizontal-tab-line-bottom;
            left: 50%;
            transform: translate(-50%, 0);
            overflow: hidden;
            border-radius: $tabs-horizontal-tab-line-border-radius;
            opacity: $tabs-horizontal-tab-line-opacity;
          }

          &.active {
            color: $tabs-titles-item-active-color;
            font-weight: $tabs-titles-item-active-font-weight;

            .nut-tabs__titles-item__line {
              content: ' ';
              width: $tabs-horizontal-titles-item-active-line-width;
              height: $tabs-horizontal-titles-item-active-line-height;
              background: $tabs-horizontal-tab-line-color;
            }
          }
        }
      }
    }
  }

  .nut-tabs__titles {
    height: $tabs-horizontal-titles-height;
    padding: 0 10px;
    display: flex;
    user-select: none;
    background: $tabs-titles-background-color;
    border-radius: $tabs-titles-border-radius;
    flex-shrink: 0;
    overflow: hidden;

    &.large {
      .nut-tabs__titles-item {
        font-size: $tabs-titles-item-large-font-size;
      }
    }

    &.normal {
      .nut-tabs__titles-item {
        font-size: $tabs-titles-item-font-size;
      }
    }

    &.small {
      .nut-tabs__titles-item {
        font-size: $tabs-titles-item-small-font-size;
      }
    }

    &::-webkit-scrollbar {
      display: none;
      width: 0;
      background: transparent;
    }

    &.smile {
      .nut-tabs__titles-item {
        &.active {
          .nut-tabs__titles-item__smile {
            width: 20px;
            height: 8px;
          }
        }
      }
    }

    &.scrollable {
      overflow-x: auto;
      overflow-y: hidden;

      .nut-tabs__titles-item {
        width: auto;
      }
    }

    .nut-tabs__titles-item {
      position: relative;
      font-size: $tabs-titles-item-font-size;
      min-width: $tabs-horizontal-titles-item-min-width;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      color: $tabs-titles-item-color;

      .nut-tabs__titles-item__text {
        text-align: center;

        &.ellipsis {
          @include oneline-ellipsis();
        }
      }

      .nut-tabs__titles-item__smile,
      .nut-tabs__titles-item__line {
        position: absolute;
        transition: width 0.3s ease;
        width: 0;
        height: 0;
        content: ' ';
        bottom: $tabs-horizontal-tab-line-bottom;
        left: 50%;
        transform: translate(-50%, 0);
        overflow: hidden;
        border-radius: $tabs-horizontal-tab-line-border-radius;
        opacity: $tabs-horizontal-tab-line-opacity;
      }

      .nut-tabs__titles-item__smile {
        .nut-icon {
          position: absolute;
          font-size: 12px;
          width: 100%;
          height: 100%;
          color: $tabs-tab-smile-color;
        }
      }

      &.nut-tabs__titles-item-left-align {
        flex: none;
      }

      &.disabled {
        color: $disable-color;
      }

      &.active {
        color: $tabs-titles-item-active-color;
        font-weight: $tabs-titles-item-active-font-weight;

        .nut-tabs__titles-item__line {
          content: ' ';
          width: $tabs-horizontal-titles-item-active-line-width;
          height: $tabs-horizontal-titles-item-active-line-height;
          background: $tabs-horizontal-tab-line-color;
        }
      }
    }
  }

  &__content {
    &__wrap {
      overflow: hidden;
    }

    display: flex;
    box-sizing: border-box;
  }
}
