@import '~scss/variables';

.appList {
  position: relative;
  padding-bottom: 12px;

  .appItem {
    display: inline-block;
    width: calc(33.3% - 14px);
    margin-bottom: 20px;
    margin-right: 20px;
    vertical-align: top;
    cursor: pointer;

    &:nth-of-type(3n + 3) {
      margin-right: 0;
    }
  }

  @media (max-width: 100px) {
    .appItem{
      width: calc(50% - 11px);

      &:nth-of-type(3n + 3) {
        margin-right: 20px;
      }

      &:nth-of-type(2n + 2) {
        margin-right: 0;
      }
    }
  }

  .noApp {
    height: 226px;
    border-radius: 8px;
    padding: 32px 0;
    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
    background-color: #fff;
    text-align: center;

    p {
      width: 586px;
      margin: 0 auto;
      margin-top: 20px;
    }
  }

  .loading {
    text-align: center;
  }

  .loadMore {
    text-align: center;
    color: #79879c;
    margin: 0 20em;
    display: flex;
    span {
      padding: 0 2em;
    }
    &:before,
    &:after {
      content: '';
      flex: 1;
      background: linear-gradient(transparent 50%, #ccc 50%, transparent 54%);
    }
  }
}
