@import '../../style/index';

.@{prefix-cls}-wgxw {
  &-content {
    --wgxw-main-color: #000;
    --wgwx-label-color: #595959;
    --wgxw-border-color: rgba(0, 0, 0, 0.1);
    --wgxw-bg-color: transparent;

    &.dark {
      --wgxw-main-color: #fff;
      --wgwx-label-color: #fff;
      --wgxw-border-color: #1064a7;
      --wgxw-bg-color: rgba(0, 155, 233, 0.1);
    }

    &-spin {
      position: absolute;
      margin: 150px 0 0 50%;
      transform: translateX(-50%);
    }

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    overflow: auto;
    color: var(--modal-title-color);
    position: relative;
    &-item {
      padding-bottom: 0;
      display: flex;
      flex-direction: column;
      height: 233px;
      background: var(--wgxw-bg-color);
      border: 1px solid var(--wgxw-border-color);
      border-radius: 8px;
      &-img {
        flex: 1;
        img {
          border-radius: 8px 8px 0 0;
          width: 100%;
          height: 133px;
        }
      }
      & > p {
        padding: 12px 6px;
        height: 101px;
        font-size: 14px;
      }

      &-info1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
        & > span:nth-child(1) {
          color: var(--wgxw-main-color);
          font-size: 14px;
        }
      }
      &-info2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
        & > span {
          color: var(--wgwx-label-color);
        }
        & > div {
          color: var(--wgwx-label-color);
        }
      }
      &-info3 {
        display: flex;
        gap: 8px;
        align-items: center;
        color: var(--wgwx-label-color);
      }
      &-TO_BE_RESOLVED,
      &-PENDING {
        color: #faad14;
      }
      &-TO_BE_AUDITED {
        color: #faad14;
      }
      &-FAILED {
        color: #ff4d4f;
      }
      &-PASSED {
        color: #52c41a;
      }
      &-IGNORED {
        color: #999999;
      }
    }
  }
}
