.#{$ns}Matrix-container {
  background-color: var(--saas-Background-Header);
  padding: 10px;

  .#{$ns}Matrix-Search {
    margin-bottom: 10px;
    .ant-input {
      border-radius: 8px;
      border: none;
    }
  }

  .#{$ns}Matrix-group {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background-color: var(--saas-main-bg);
    border-radius: 8px;

    .#{$ns}Matrix-item {
      margin-top: 10px;
      width: 25%;
      // border-right: 1px solid #eee;
      // border-bottom: 1px solid #eee;

      &.clear-bot {
        border-bottom: none;
      }

      .matrix-action {
        display: flex;
        flex-direction: column;
        align-items: center;

        .#{$ns}TplField {
          padding: 0 4px;
          max-width: 96%;
          height: 40px;
          font-size: 14px;
          font-family: system-ui;
          color: var(--saas-Title-Text);
          margin-top: 10px;

          span {
            width: 100%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: wrap;
            word-wrap: break-word;
          }
        }

        .fa {
          margin-top: 10px;
          height: 42px;
          width: 42px;
          color: #fff;
          border-radius: 8px;
          font-size: 22px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

      }

      &:nth-child(3n) {
        border-right: none;
      }
    }
  }
}