_auk-avatar.scss

/* ==========================================================================
  auk-avatar
  ========================================================================== */

.auk-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Sizes
   ========================================================================== */

.auk-avatar--small {
  width: 2rem;
  height: 2rem;
  
  .au-c-icon {
    --au-icon-size: 1.2rem;
  }
}

/* Skins
   ========================================================================== */

.auk-avatar--default {
  background-color: $auk-gray-200;
  color: #666;
}

/* Image variant
   ========================================================================== */

.auk-avatar--img {
  background: none;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;

    object-fit: cover; // Not supported in IE
    object-position: center; // Not supported in IE
  }
}

/* Avatar and text
   ========================================================================== */


.auk-avatar-and-text {
  display: flex;
  align-items: center;
  min-width: 0;

  .auk-avatar {
    margin-right: 1.2rem;
  }

  .auk-avatar.auk-avatar--small {
    margin-right: 1.2rem;
  }
}

.auk-avatar-and-text__text {
  flex: 1;
  min-width: 0;
}