@import '~tc-ui/src/styles/tc-includes';

.loading-list-item {
  display: flex;
  max-width: 960px;
  border-bottom: 1px solid rgba(163, 163, 174, 0.3);
  @media (max-width: 700px) {
    display: block;
  }

  &:last-child {
    border-bottom: none;
  }

  .user-info {
    background-color: $tc-white;
    flex-basis: 60%;
    padding: 20px;
    position: relative;
    @media (max-width: 700px) {
      flex-basis: 50%;
    }
  }

  .user-profile {
    display: flex;
    align-items: center;

    .user-avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      position: relative;
      border-radius: 50%;
      background-color: $tc-gray-10;
      @media (max-width: 700px) {
        margin-right: 10px;
      }
    }

    .username-and-details {
      max-width: 225px;
    }

    .username {
      height: 18px;
      width: 126px;
      margin-bottom: 10px;
      background-color: $tc-gray-10;
      @media (max-width: 700px) {
        max-width: 180px;
      }
    }


    .user-details {
      .country-and-wins {
        height: 12px;
        width: 238px;
        background-color: $tc-gray-neutral-light;
        margin-bottom: 3px;
      }

      .member-since {
        height: 12px;
        width: 238px;
        background-color: $tc-gray-neutral-light;
      }
    }
  }

  .user-stats {
    display: flex;
    align-items: center;
    flex-basis: 50%;
    max-width: 440px;
    margin-left: auto;
    padding: 20px;
    background-color: $tc-gray-neutral-light;
    border-left: 1px solid $tc-gray-neutral-dark;
    @media (max-width: 700px) {
      flex-basis: 100%;
      display: block;
      width: 100%;
      max-width: 1000px;
      padding: 15px;
      border: none;
      border-top: 1px solid $tc-gray-neutral-dark;
      overflow-x: auto;
    }
  }

  .tag-list {
    height: 12px;
    width: 245px;
    background-color: $tc-gray-10;
  }

  .track-list {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    @media (max-width: 700px) {
      flex-wrap: nowrap;
      display: block;
      width: auto;
      white-space: nowrap;
    }
  }

  .track-item {
    display: inline-block;
    height: 26px;
    width: 70px;
    margin-top: 10px;
    margin-right: 5px;
    border-radius: 13px;
    background-color: $tc-gray-10;
    &:last-child {
      margin-right: 0;
      @media (max-width: 700px) {
        margin-right: 15px;
      }
    }
  }
}