// Common styles for "user-info" component
.user-info {
  display: inline-block;
  clear: both;
  margin-bottom: 1em;

  .user-image {
    float: left;
    padding-right: 4px;
  }

  .user-detail {
    float: left;
    width: 70%;
    padding-left: 5px;
    font-size: .929em;

    .name-line {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .username a {
      font-weight: bold;
      color: dark-light-choose($primary-high, $secondary-low);
    }

    .name {
      margin-left: 5px;
      color: dark-light-choose($primary-high, $secondary-low);
    }

    .title {
      margin-top: 3px;
      color: dark-light-choose($primary-medium, $secondary-medium);
    }
  }

  &.small {
    width: 333px;
    @media screen and (max-width: 600px) {
      width: 100%;
    }
  }

  &.medium {
    min-height: 60px;

    .username, .name {
      display: block;
    }

    .name {
      margin-left: 0;
    }

    &.badge-info {
      min-height: 80px;

      .granted-on {
        color: dark-light-choose($primary-medium, $secondary-medium);
      }

      .post-link {
        display: block;
        margin-top: 0.2em;
      }
    }
  }
}