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

.@{prefix-cls}-wggs {
  &-content {
    --wggs-border-color: rgba(0, 0, 0, 0.1);
    --wggs-bg-color: transparent;

    &.dark {
      --wggs-border-color: #1064a7;
      --wggs-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: 173px;
      background: var(--wggs-bg-color);
      border: 1px solid var(--wggs-border-color);
      border-radius: 8px;
      &-img {
        flex: 1;
        img {
          border-radius: 8px 8px 0 0;
          width: 100%;
          height: 133px;
        }
      }
      & > p {
        padding-left: 12px;
        height: 40px;
        line-height: 39px;
        font-size: 14px;
      }
    }
  }
}
