.user {
  align-items: flex-start;
  display: flex;
  padding: 0.5rem;
  position: relative;

  &.small {
    align-items: center;
  }

  .online-status {
    border-radius: 50%;
    height: 10px;
    left: 3px;
    position: absolute;
    top: 6px;
    width: 10px;

    &.online {
      background-color: #36de4b;
      box-shadow: 0 1px 4px 2px #36de4b;
    }

    &.offline {
      background-color: #8080806b;
    }
  }

  .profile-picture {
    @apply com-bg-tWhite;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.5rem;

    img {
      width: 100%;
      vertical-align: top;
    }

    &.medium {
      width: 75px;
      height: 75px;
      margin-right: 0.75rem;
    }

    &.small {
      width: 30px;
      height: 30px;
      margin-right: 0.5rem;
    }
  }

  .profile-info {
    // word-break: break-word;
    max-width: 80%;
    text-align: left;

    .name {
      margin: 0;
      .disable-anchor {
        pointer-events: none;
      }

      a {
        text-decoration: none;
        color: inherit;

        &:hover {
          text-decoration: underline;
        }
      }

      &.medium {
        font-size: 1.2rem;
      }

      &.small {
        font-size: 14px;
        font-weight: 300;
        line-height: 14px;
      }
    }

    .designation {
      @apply com-mt-1;
      font-size: 0.8rem;
      color: grey;

      &.medium {
        font-size: 0.9rem;
      }

      &.small {
        font-size: 11px;
        line-height: 12px;
      }
    }
  }
}
