@st-namespace 'Avatar-st-css';
@st-import [ fontFamily ] from '../../common/fonts.st.css';

:import {
    -st-from: './Avatar.base.st.css';
    -st-default: AvatarBase;
}

.root {
    -st-extends: AvatarBase;
    -st-states: size(enum(large, medium, small, xLarge, xSmall, xxSmall));
    background-color: #d8d8d8;
}

.root::image,
.root::before {
    color: #979797;
    font-family: value(fontFamily);
    font-weight: 500;
}

.root:size(xLarge) {
    font-size: 20px;
    height: 60px;
    width: 60px;
}

.root:size(large) {
    font-size: 18px;
    height: 52px;
    width: 52px;
}

.root:size(medium) {
    font-size: 12px;
    height: 36px;
    width: 36px;
}

.root:size(small) {
    font-size: 9px;
    height: 28px;
    width: 28px;
}

.root:size(xSmall) {
    font-size: 7px;
    height: 20px;
    width: 20px;
}

.root:size(xxSmall) {
    font-size: 5px;
    height: 16px;
    width: 16px;
}

/* st-namespace-reference="../../../../src/components/Avatar/Avatar.st.css" */