@import '../../../base/style.less';
@popupPrefix: iot-card-multi-text-out;

.@{popupPrefix} {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  font-size: .16rem;

  .@{popupPrefix}-box {
    padding-bottom: var(--labtitle-margin-top);

    .floor {
      display: grid;
      grid-template-columns: repeat(3, 33%);
      align-items: center;
      justify-items: center;
      width: 100%;
      margin: 0 auto;
      // border-bottom: 1px solid rgba(255, 255, 255, 0.34);

      .card-items {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        font-size: .16rem;

        .card-line {
          position: absolute;
          top: 25%;
          right: -.01rem;
          width: var(--txtsplit-width-size);
          height: var(--txtsplit-height-size);
          background: var(--txtsplit-color);
          // background: #E5E5E5;
          margin-top: var(--txtsplit-margin)
        }

        .card-title {
          color: var(--labtitle-font-color);
          font-size: var(--labtitle-font-size);
          font-family: var(--labtitle-font-family);
          height: var(--labelbg-height-size);
          margin-top: var(--labtitle-margin-top)
        }

        .card-state-text {
          // background: red;
          max-width: var(--labtext-width);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          font-family: var(--labtext-font-family);
          font-size: var(--labtext-font-size);
          color: var(--labtext-font-color);
          height: var(--labtext-font-height);
          line-height: var(--labtext-font-height);
          margin: var(--labtext-maring-TD);
          padding: var(--labtext-padding-TD);
        }
      }

      .card-items:last-child {
        .card-line {
          width: 0;
        }
      }
    }

  }
  .show-bord {
    border-bottom: 1px solid var(--txtsplit-color);
    // border-color: var(--txtsplit-color);
  }
  .more-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--more-bg-height);

    .more-card-icon {
      width: var(--moreicon-width-size);
      height: var(--moreicon-height-size);
      color: var(--moreicon-font-color);
      font-size: var(--moreicon-font-size);
      margin-top: .04rem;
      margin-left: var(--moreicon-margin-left);
      transform: rotate(90deg);
      &.show {
        margin-top: 0rem;
        margin-bottom: .04rem;
        transform: rotate(-90deg);
      }
    }

    .more-card-text {
      font-family: var(--moretxt-font-family);
      font-size: var(--moretxt-font-size);
      color: var(--moretxt-font-color);
      // height: var(--moretxt-font-height);
    }
  }

}

@keyframes slide {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}