@use '@material/typography';
@use './variables';

.mdc-avatar {
    display: inline-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    user-select: none;
    overflow: hidden;
    color: #fff;
    background-color: #bdbdbd;
    vertical-align: middle;

    .mdc-avatar__image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }

    .mdc-avatar__icon {
        font-size: variables.$icon-font-size-medium;
    }

    .mdc-avatar__text {
        width: 100%;
        height: 100%;
        font-size: variables.$text-font-size-medium;
        line-height: variables.$size-medium;
        text-align: center;
        @include typography.base;
    }

    &.mdc-avatar--small {
        width: variables.$size-small;
        height: variables.$size-small;
    
        .mdc-avatar__icon {
            font-size: variables.$icon-font-size-small;
        }
    
        .mdc-avatar__text {
            font-size: variables.$text-font-size-small;
            line-height: variables.$size-small;
        }
    }

    &.mdc-avatar--medium {
        width: variables.$size-medium;
        height: variables.$size-medium;
    
        .mdc-avatar__icon {
            font-size: variables.$icon-font-size-medium;
        }
    
        .mdc-avatar__text {
            font-size: variables.$text-font-size-medium;
            line-height: variables.$size-medium;
        }
    }
    
    &.mdc-avatar--large {
        width: variables.$size-large;
        height: variables.$size-large;
    
        .mdc-avatar__icon {
            font-size: variables.$icon-font-size-large;
        }
    
        .mdc-avatar__text {
            font-size: variables.$text-font-size-large;
            line-height: variables.$size-large;
        }
    }
}