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

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

  .user-image-inner {
    position: relative;
    display: inline-block;
  }

  .user-detail {
    float: left;
    width: 70%;
    padding-left: 5px;
    @media screen and (max-width: 600px) {
      font-size: var(--font-down-1);
    }

    .name-line {
      @include ellipsis;
    }

    .bold a {
      font-weight: bold;
    }

    .margin a {
      margin-left: 5px;
    }

    .name a,
    .username a {
      color: var(--primary-high-or-secondary-low);
    }

    .title {
      margin-top: 3px;
      color: var(--primary-med-or-secondary-med);
    }
  }

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

  &.medium {
    min-height: 60px;

    .username,
    .name {
      display: block;
    }

    .margin a {
      margin-left: 0;
    }

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

      .granted-on {
        color: var(--primary-med-or-secondary-med);
      }

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