.avatar {
    --rocket-ui-avatar-background-color: var(--rocket-color-primary-100);
    --rocket-ui-avatar-text-color: var(--rocket-color-primary-400);
    --rocket-ui-avatar-status-color: var(--rocket-color-grey-500);

    $this: &;

    @include size(2.5rem);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rocket-ui-avatar-background-color);
    border-radius: 50%;

    picture {
        border-radius: 50%;
    }

    svg {
        @include size(1.5rem);

        path {
            stroke: var(--rocket-ui-avatar-text-color);
        }
    }

    &__status {
        @include size(0.625rem);

        position: absolute;
        right: 2px;
        bottom: 2px;
        background: var(--rocket-ui-avatar-status-color);
        border: 1px solid var(--rocket-color-white-base);
        border-radius: 50%;

        &--online {
            --rocket-ui-avatar-status-color: var(--rocket-color-success-200);
        }
    }

    &__text {
        color: var(--rocket-ui-avatar-text-color);
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5;
        text-transform: uppercase;
    }

    &--xxlg,
    &--xlg {
        #{$this}__text {
            font-size: 1.5rem;
        }

        svg {
            @include size(2rem);
        }
    }

    &--md,
    &--xs {
        #{$this}__text {
            font-size: 0.75rem;
        }

        svg {
            @include size(1rem);
        }
    }

    &--xxlg {
        @include size(4rem);

        #{$this}__status {
            @include size(1rem);
        }
    }

    &--xlg {
        @include size(3.5rem);

        #{$this}__status {
            @include size(0.875rem);
        }
    }

    &--lg {
        @include size(3rem);

        #{$this}__status {
            @include size(0.75rem);
        }
    }

    &--md {
        @include size(2rem);

        #{$this}__status {
            @include size(0.5rem);
        }
    }

    &--xs {
        @include size(1.5rem);

        #{$this}__status {
            @include size(0.375rem);
        }
    }
}