/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/
/***** Avatar *****/
.avatar                                         { width:40px; height:40px; display:flex; flex-shrink:0; background-color:var(--color-ui-400); border-radius:50px; overflow:hidden; position:relative; }
.avatar__initials                               { width:100%; height:100%; background-color:var(--color-mist); color:var(--color-ui-000); font-size:var(--text-xs); font-weight:bold; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; z-index:1; }
.avatar__img                            		{ width:100%; height:100%; align-items:center; display:flex; position:absolute; top:0; left:0; z-index:5; }
.avatar__img img                        		{ width:100%; height:auto; }

.avatar--onLeft                                 { margin-right:16px; }

.avatar--s 										{ width:24px; height:24px; }
.avatar--s .avatar__initials                    { font-size:1rem; }

.avatar--l 										{ width:90px; height:90px; }
.avatar--l .avatar__initials                    { font-size:2rem; }