@use "variables" as *;

p-avatar {
    display: flex;
    justify-content: center;
    align-items: center;

    .p-avatar.p-avatar-circle {
        overflow: unset;

        .p-badge-dot {
            bottom: 0;
            top: unset;
            transform: unset;
            transform-origin: unset;
        }

        img {
            border-radius: 50%;
        }
    }

    .p-avatar-lg {
        width: $spacing-6;
        height: $spacing-6;
        min-width: $spacing-6;
        max-width: $spacing-6;

        .p-avatar-text {
            font-size: $spacing-5;
            line-height: $spacing-6;
        }
    }
    .p-avatar-xl {
        width: $spacing-7;
        height: $spacing-7;

        .p-avatar-text {
            font-size: $spacing-6;
            line-height: $spacing-7;
        }
    }
}

.p-avatar {
    font-family: $font-default;
    color: $white;
    background-color: $color-palette-secondary;

    .p-avatar-text {
        font-size: $spacing-4;
        line-height: $spacing-5;
    }
}
