/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.avatar {
    position: relative;
    width: 4em;
    height: 4em;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    font-size: 2rem
}

.avatar::before {
        position: relative;
        width: 4em;
        height: 4em;
        overflow: hidden;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(51, 74, 67, 0.2);
        border-radius: 50%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
    }

.avatar .initials {
        font-family: "GtSectra", serif;
        font-weight: 400;
        opacity: 0.8;
        color: #334a43;
        font-size: 1.4em;
    }

.avatar .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.avatar .image.enter {
            opacity: 0;
        }

.avatar .image.enterActive {
            opacity: 1;
            transition: opacity 0.3s linear;
        }

.avatar .image.exit {
            opacity: 1;
        }

.avatar .image.exitActive {
            opacity: 0;
            transition: opacity 0.3s linear;
        }