@import './apps/commudle-admin/src/assets/styles/variables';

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

  &.small {
    align-items: center;
  }

  .profile-picture {
    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 {
    max-width: 100%;
    text-align: left;

    .name {
      margin: 0;

      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;
      }
    }

    .description {
      margin: $space-4 0 0;
      font-size: 0.8rem;
      color: black;

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

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