.profile {

  &.teaser {
    display: flex;
    flex-direction: row;
    width: 320px;
    max-width: 100%;
    margin: .75rem 0;

    .field--type-image {
      width: 40px;
      height: 40px;
      margin: 0 1rem 0 0;
      flex: 0 0 40px;

      img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 20px;
      }
    }

    .user__text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .user__name {
      @extend %arg-typo--h6;
      a {
        color: var(--arg-base-text-default-color);
        text-decoration: none;

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

    .user__roles {
      @extend %arg-typo--subtitle2;
      color: var(--arg-theme-text-secondary-on-background,rgba(0,0,0,.54));
    }
  }

  &.full{
    .field--name-field-user-image {
      flex: 0 0 auto;

      img {
        display: block;
        margin: 0 auto;
      }
    }
  }

  &.argue-list-item {

    .field--type-image {
      width: 48px;
      height: 48px;
      margin: 0 1rem 0 0;
      flex: 0 0 48px;

      img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 24px;
      }
    }

    .user__roles {
      @extend %arg-typo--subtitle2;
      color: var(--arg-theme-text-secondary-on-background,rgba(0,0,0,.54));
    }
  }
}
