@use 'theme';
@use '@tokens' as tokens;
@use '../../tools/dictionaries';

.UNSTABLE_Avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--#{tokens.$css-variable-prefix}avatar-width);
    height: var(--#{tokens.$css-variable-prefix}avatar-height);
    overflow: hidden;
    text-decoration: none;
    color: theme.$color;
    border-width: theme.$border-width;
    border-style: theme.$border-style;
    border-color: theme.$border-color;
    border-radius: theme.$border-radius;
    background-color: theme.$background-color;
    user-select: none;

    @media (hover: hover) {
        &:hover {
            text-decoration: none;
            color: theme.$color;
        }
    }
}

.UNSTABLE_Avatar--square {
    border-radius: theme.$border-radius-square;
}

.UNSTABLE_Avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@include dictionaries.generate-sizes('UNSTABLE_Avatar', theme.$sizes);
