@head_height: unit(88, rpx);

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.taro3table {
  box-sizing: border-box;
  position: relative;
  max-width: 100vw;
  border-radius: unit(8, rpx);
  border: unit(2, rpx) solid rgba(67, 120, 190, 0.1);

  .taro3table_loading {
    position: absolute;
    height: calc(100% + unit(4, rpx));
    width: calc(100% + unit(4, rpx));
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(unit(6, rpx));
    z-index: 94;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: unit(28, rpx);

    > .taro3table_circle {
      height: unit(60, rpx);
      width: unit(60, rpx);
      border-top: unit(8, rpx) solid rgba(153, 153, 153, 0.7);
      border-right: unit(8, rpx) solid rgba(153, 153, 153, 0.7);
      border-bottom: unit(8, rpx) solid rgba(153, 153, 153, 0.7);
      border-left: unit(8, rpx) solid transparent;
      border-radius: 50%;
      animation: rotate 1s linear infinite;
    }
  }

  .taro3table_table {
    min-height: 100%;
    min-width: 100%;

    .taro3table_empty {
      width: 100%;
      text-align: center;
      font-size: unit(24, rpx);
      color: #cccccc;
      min-height: unit(88, rpx);
      line-height: unit(88, rpx);
    }

    .taro3table_head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: max-content;
      min-width: 100%;
      height: @head_height;
      background-color: #f7fbff;

      &.taro3table_scroll {
        position: sticky;
        top: 0;
        z-index: 93;
      }

      > .taro3table_title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: @head_height;
        color: #3975c6;
        font-size: unit(24, rpx);
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        background-color: #f7fbff;
        box-sizing: border-box;

        &:active {
          opacity: 0.7;
        }

        &.taro3table_fixed {
          position: sticky;
          top: 0;
        }

        > .taro3table_sortBtn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left: unit(10, rpx);

          > .taro3table_btn {
            @color: #e2e2e2;
            @active-color: #3975c6;
            @size: unit(8, rpx);
            height: 0;
            width: 0;

            &.taro3table_ascend {
              border-top: @size solid transparent;
              border-left: @size solid transparent;
              border-right: @size solid transparent;
              border-bottom: @size solid @color;
              margin-bottom: unit(4, rpx);

              &.taro3table_active {
                border-bottom-color: @active-color;
              }
            }

            &.taro3table_descend {
              border-top: @size solid @color;
              border-left: @size solid transparent;
              border-right: @size solid transparent;
              border-bottom: @size solid transparent;

              &.taro3table_active {
                border-top-color: @active-color;
              }
            }
          }
        }
      }
    }

    .taro3table_body {
      @min-height: unit(120, rpx);
      min-height: @min-height;

      > .taro3table_row {
        min-height: @min-height;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: max-content;
        width: max-content;
        min-width: 100%;
        background-color: #ffffff;
        border-top: unit(1, rpx) solid rgba(67, 120, 190, 0.1);

        &:first-child {
          border-top: none;
        }

        > .taro3table_col {
          min-height: @min-height;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          box-sizing: border-box;

          text {
            font-size: unit(28, rpx);
            font-family: PingFangSC-Regular, PingFang SC, sans-serif;
            font-weight: 400;
            color: #222222;
            min-width: 100%;

            // 收起
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          // 展开
          &.taro3table_expansion {
            height: 100%;

            text {
              overflow: auto;
              text-overflow: unset;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
            }
          }

          &.taro3table_fixed {
            position: sticky;
            top: 0;
            z-index: 92;
          }
        }
      }
    }
  }
}
