@use '../function' as *;
@use '../mixin';

@mixin roolith-avatar() {
    .avatar {
        position: relative;
        padding-left: calc(var(--r-avatar-default-size) + #{rem(15)});
        min-height: var(--r-avatar-default-size);
    }

    .avatar-small {
        padding-left: calc(var(--r-avatar-small-size) + #{rem(15)});
        min-height: var(--r-avatar-small-size);
    }

    .avatar-fig {
        @include mixin.abs-pos(0, auto, auto, 0);
        width: var(--r-avatar-default-size);
        height: var(--r-avatar-default-size);

        img {
            @extend .fig-fit;
        }

        .avatar-small & {
            width: var(--r-avatar-small-size);
            height: var(--r-avatar-small-size);
        }
    }

    .avatar-label {
        font-size: rem(14);
        line-height: rem(18);
        font-weight: var(--r-global-font-bold-weight);
        color: var(--r-avatar-label-color);
        display: block;
        padding: 0 0 rem(3);
        @include mixin.transition('color');

        span {
            font-weight: var(--r-global-font-weight);
        }

        &:hover {
            color: var(--r-avatar-label-hover-color);
        }

        .avatar-small & {
            position: relative;
            top: rem(6);
        }
    }

    .avatar-primary-block {
        font-size: rem(14);
        line-height: rem(18);

        > *:not(:last-child) {
            margin: 0 rem(5) 0 0;
        }
    }

    .avatar-secondary-block {
        padding: rem(5) 0 0;
        @extend .small, .dimmed;
    }
}