@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

.ui.image {
    background-color: transparent;
    display: inline-block;
    max-width: 100%;
    position: relative;
    vertical-align: middle;
    &.image-size- {
        &xxsmall { height: auto; width: 32px; }
    }
    &.image-avatar {
        align-items: center;
        background-color: color(backgroundColorNest);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: inset 0 0 0 1px color(borderColor);
        color: color(backgroundColorInverseAlternate);
        display: inline-flex;
        font-weight: $fontWeightSemiBold;
        height: 32px;
        justify-content: center;
        width: 32px;
        &.image-size- {
            &xxsmall { height: 32px; }
        }
        &.image-avatar-person {
            border-radius: 10%;
        }

        &.image-avatar-user {
            border-radius: 50%;
        }
    }
}