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

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

  .username {
    @include tc-heading;
    color: $tc-gray-80;
    text-overflow: ellipsis;
    overflow: hidden;
    @media (max-width: 700px) {
      max-width: 180px;
    }
  }

  .user-details {
    .country-and-wins {
      @include tc-label-small;
      color: $tc-gray-60;

      .user-country {
        text-transform: uppercase;
      }
    }

    .member-since {
      @include tc-label-small;
      color: $tc-gray-30;
    }
  }
}