.op-sowing-wall {
  width: 100%;
  height: 100%;
  flex: 1; // 外部容器必须是flex布局
  display: flex;
  flex-direction: column;
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin: 8px 0;
    &-title {
      display: flex;
      align-items: center;
      span {
        line-height: 48px;
        font-size: 40px;
        color: #143666;
      }
      .op-tag {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }
  &-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.center {
      .op-sowing-wall-body-row {
        justify-content: center;
      }
    }
    &-row {
      display: flex;
    }
    &-row + &-row {
      margin-top: 12px;
    }
    .item {
      position: relative;
      min-width: 70px;
      min-height: 70px;
      max-width: 260px;
      max-height: 260px;
      display: flex;
      flex-direction: column;
      gap: 4px;

      // &-placeholder {
      //   padding-top: 100%;
      // }
      &-inner {
        flex: 1;
        // position: absolute;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        // top: 0;
      }
      &-content {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
        color: white;
        // color: var(--custom-color, white);
        border-radius: 4px 4px 0 0;
        border-bottom: none !important;
        // background: var(--custom-content-background-color);
        .cn-ui-icon .item-content-icon {
          width: 42px;
          height: 42px;
        }
      }
      &-basket-no {
        line-height: 24px;
        font-size: 20px;
        text-align: center;
        color: #fff;
        // color: var(--custom-color, white);
        // background: var(--custom-basket-no-background-color);
        border-radius: 0 0 4px 4px;
      }
      .op-wall-text {
        background-color: #e5e8ed;
        text-align: center;
        color: #000000;
        line-height: 1.5;
      }
      &.item-empty {
        .item-content {
          border: 1px dashed #b8cfe6;
          background: #ffffff;
        }
        .item-basket-no {
          background-color: #c7d3e2;
        }
      }
      &.item-filled {
        .item-content {
          color: #333;
          border: 1px solid #dddddd;
          background-color: #ebebeb;
        }
        .item-basket-no {
          background-color: #8fa9c6;
        }
      }
      &.item-current {
        .item-content {
          border: 1px solid #196ee6;
          background-color: #196ee6;
        }
        .item-basket-no {
          background-color: #1458b8;
        }
      }
      &.item-finished {
        .item-content {
          border: 1px solid #dddddd;
          background-color: #9af1e3;
          &-icon {
            color: #11d3b2;
          }
        }
        .item-basket-no {
          background-color: #11d3b2;
        }
      }
      &.item-lack {
        .item-content {
          border: 1px solid #fe3824;
          background-color: #fe3824;
        }
        .item-basket-no {
          background-color: #ca3222;
        }
      }
      &.item-intercepted {
        .item-content {
          border: 1px solid #fe3824;
          background-color: #fe3824;
        }
        .item-basket-no {
          background-color: #ca3222;
        }
      }
      &.item-blue {
        .item-content {
          border: 1px solid #196ee6;
          background-color: #196ee6;
        }
        .item-basket-no {
          background-color: #1458b8;
        }
      }
    }
    .item + .item {
      margin-left: 8px;
    }
  }
}