/*
 * Initials avatar (.bsc-avatar): a colored circle with the user's initials.
 * Markup comes from avatar_html() (application/helpers/avatar_helper.php),
 * bscAvatar.html() (assets/js/avatar.js) or <UserAvatar> (React). Users with a
 * picture get the same element with the <img class="bsc-avatar__img"> laid on
 * top: the initials show while it loads and stay if it fails to load.
 * Width/height/font-size are set inline when a size is given; otherwise the
 * spot's own class must size the element. The doubled class outranks the
 * spot's own class (e.g. ".result{display:inline-block;color:#7f7f7f}"), which
 * the initials element now carries in place of the <img>; inline styles still win.
 */
.bsc-avatar.bsc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}
/* Single class: a spot's own class may set these (size-based font, square corners). */
.bsc-avatar {
    position: relative;
    flex: 0 0 auto;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .02em;
    vertical-align: middle;
    user-select: none;
}
.bsc-avatar.bsc-avatar--square  { border-radius: 0; }
.bsc-avatar.bsc-avatar--rounded { border-radius: 4px; }

/* !important: pages style avatar <img>s through long descendant selectors
   (".profile-photo img", ".media img"...); the layered picture must still fill the circle. */
.bsc-avatar > .bsc-avatar__img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit;
    object-fit: cover;
    transition: opacity .15s ease-in;
}
/* Hidden until it has loaded, but only once avatar.js runs (it adds .bsc-avatar-js),
   so a page without the script still shows the picture. */
.bsc-avatar-js .bsc-avatar > .bsc-avatar__img { opacity: 0; }
.bsc-avatar-js .bsc-avatar > .bsc-avatar__img.is-loaded { opacity: 1; }
.bsc-avatar > .bsc-avatar__img.is-broken { display: none; }