$small: 40px;
$medium: 64px;
$large: 80px;

:host {
    .avatar, img {
        color: azure;
        border-radius: 8px;

        &[data-badge] {
            &::after {
                transform: translate(0%, 0%);
            }
        }

        &:not(.has-image) {
            &.is-small {
                padding: 12px 0;
                font-size: 10px;
            }

            &.is-medium {
                padding: 15.5px 0;
                font-size: 20px;
            }

            &.is-large {
                padding: 17px 0;
                font-size: 30px;
            }
        }

        &.is-small, &.is-small>img {
            width: $small;
            height: $small;
        }

        &.is-medium,
        &.is-medium>img {
            width: $medium;
            height: $medium;
        }

        &.is-large,
        &.is-large>img {
            width: $large;
            height: $large;
        }

        &.is-circle,
        &.is-circle>img {
            border-radius: 50px;
        }
    }
}