.oui-avatar {
    border-radius: 100%;
    height: 80px;
    width: 80px;
    background-position: center center;
    background-size: cover;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuOC4zICgyOTgwMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+cHJvZmlsZS1kZWZhdWx0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTQwLDgwIEM2Mi4wOTEzOSw4MCA4MCw2Mi4wOTEzOSA4MCw0MCBDODAsMTcuOTA4NjEgNjIuMDkxMzksMCA0MCwwIEMxNy45MDg2MSwwIDAsMTcuOTA4NjEgMCw0MCBDMCw2Mi4wOTEzOSAxNy45MDg2MSw4MCA0MCw4MCBaIiBpZD0icGF0aC0xIj48L3BhdGg+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0icHJvZmlsZS1kZWZhdWx0Ij4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xIiBmaWxsPSIjRTFFMUUxIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iODAiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9IkFjY291bnRTZXR0aW5ncy0tMDMwMzE1Ij4KICAgICAgICAgICAgICAgIDxnIGlkPSJwcm9maWxlIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iUGFnZS0xLUNvcHkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ibWFzay0yIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9InBhdGgtMSIgY3g9IjQwIiBjeT0iNDAiIHI9IjQwIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTWFzayIgZmlsbD0iI0UxRTFFMSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJwYXRoLTEiIGN4PSI0MCIgY3k9IjQwIiByPSI0MCI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlBhZ2UtMS1DbGlwcGVkIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InBhdGgtMSI+PC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlBhZ2UtMSIgbWFzaz0idXJsKCNtYXNrLTIpIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjAwMDAwMCwgMTYuMDAwMDAwKSIgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjUwMDAwMCwgMC4wMDAwMDApIiBpZD0iQXJ0Ym9hcmQtMjItQ29weSIgZmlsbD0iIzQ2NDU2QSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJJbXBvcnRlZC1MYXllcnMiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUyLjU3NDY5MiwxOC4wMDE4NTM3IEM1Mi41NzQ2OTIsMjcuNjAwMjM1NiA0NC40OTM2MjI2LDM1LjM4NTcxMzQgMzQuNTIyMjIyMiwzNS4zODU3MTM0IEMyNC41NTA4MjE4LDM1LjM4NTcxMzQgMTYuNDY1OTAyNSwyNy42MDAyMzU2IDE2LjQ2NTkwMjUsMTguMDAxODUzNyBDMTYuNDY1OTAyNSw4LjM5OTc2NDM5IDI0LjU1MDgyMTgsMC42MTQyODY1NSAzNC41MjIyMjIyLDAuNjE0Mjg2NTUgQzQ0LjQ5MzYyMjYsMC42MTQyODY1NSA1Mi41NzQ2OTIsOC4zOTk3NjQzOSA1Mi41NzQ2OTIsMTguMDAxODUzNyIgaWQ9IkZpbGwtMSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuMzUwNDQ3MTI5LDg3LjUzNjc2NDkgQzAuMzUwNDQ3MTI5LDg3LjUzNjc2NDkgLTUuOTM3ODUyOTgsMzMgMzQuNzU5OTU0OCwzMyBDNzUuNDU3NzYyNywzMyA2OC42MDU4MDU0LDg3LjUzNjc2NDkgNjguNjA1ODA1NCw4Ny41MzY3NjQ5IEM2OC42MDU4MDU0LDg3LjUzNjc2NDkgNTYuMTk2NTQxLDkxLjk0MjYyIDM0LjUyMjE2Miw5MS45NDI2MiBDMTIuODQ3NzgzLDkxLjk0MjYyIDAuMzUwNDQ3MTI5LDg3LjUzNjc2NDkgMC4zNTA0NDcxMjksODcuNTM2NzY0OSIgaWQ9IkZpbGwtMiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);

    &.color-admin--border {
        box-shadow: 0 0 0 1.5px map-fetch($color, ui, admin);
    }
}

.oui-avatar--small {
    height: 27px;
    width: 27px;
}

.oui-avatar--medium {
    height: 50px;
    width: 50px;
}