// Avatar
//
// Use a square image.
//
// Avatar element use `em` so we can and should modify its font-size
// to manage the size of the element.
//
// Markup: avatar.twig
//
// Styleguide: Elements.avatar
.avatar
    display inline-block
    vertical-align middle
    overflow hidden
    width _em(42px)
    height @width
    border-radius 80em // excessive value to keep it round
    background var(--color-borders)
    border 1px solid var(--color-borders)

    > img
    > svg
        display block
        width 100%
        height @width
        fill var(--color-base)

    > svg
        margin-top .05em // fix position of svg symbol-user