@use '~flux/components/css/mixin';

.avatar {
    position: relative;
    display: inline-flex;
    height: 1em;
    width: 1em;
    flex: 0 0 1em;
    border-radius: var(--radius-full);
    user-select: none;

    &:is(button) {
        padding: 0;
        border: 0;
    }
}

.avatarImage {
    display: block;
    height: inherit;
    width: inherit;
    background: var(--gray-50);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--gray-100);
}

.avatarFallback {
    position: absolute;
    display: flex;
    inset: 0;
    align-items: center;
    justify-content: center;
    border-radius: inherit;

    .icon {
        font-size: .5em;
    }

    :is(span) {
        font-size: .4em;
        font-weight: 600;
        line-height: 1;
    }
}

.avatarFallbackColorized {
    composes: avatarFallback;

    background: color-mix(in srgb, var(--color), var(--gray-25) 80%);
    color: var(--color);
}

[dark] .avatarFallbackColorized {
    background: color-mix(in srgb, var(--color), var(--gray-25) 70%);
}

.avatarFallbackNeutral {
    composes: avatarFallback;

    background: var(--gray-100);
    color: var(--foreground-secondary);
}

.avatarLoading {
    position: absolute;
    display: flex;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--gray-50) r g b / .84);
    box-shadow: inset 0 0 0 1px var(--gray-100);
    border-radius: inherit;
    backdrop-filter: blur(3px) saturate(180%);

    :local(.spinner) {
        --track: rgb(from var(--gray-950) r g b / .12);
    }
}

.avatarStatus {
    position: absolute;
    display: block;
    right: .03em;
    bottom: .03em;
    height: .27em;
    width: .27em;
    border-radius: var(--radius-full);
}

.avatarStatusGray {
    composes: avatarStatus;

    background: var(--gray-500);
}

.avatarStatusPrimary {
    composes: avatarStatus;

    background: var(--primary-600);
}

.avatarStatusDanger {
    composes: avatarStatus;

    background: var(--danger-600);
}

.avatarStatusInfo {
    composes: avatarStatus;

    background: var(--info-600);
}

.avatarStatusSuccess {
    composes: avatarStatus;

    background: var(--success-600);
}

.avatarStatusWarning {
    composes: avatarStatus;

    background: var(--warning-600);
}

.avatarStatusIcon {
    position: absolute;
    right: 0;
    bottom: 0;
}

.avatarClickable {
    cursor: pointer;
    transition: filter 150ms var(--swift-out);

    @include mixin.hover {
        filter: brightness(110%);
    }
}

.statusAvatar {
    composes: avatar;
}

.statusAvatar .avatarFallback,
.statusAvatar .avatarImage {
    mask: radial-gradient(circle .18em at calc(100% - 0.17em) calc(100% - 0.17em), transparent 100%, #000 100%);
    -webkit-mask: radial-gradient(circle .18em at calc(100% - 0.17em) calc(100% - 0.17em), transparent 100%, #000 100%);
}

.statusIconAvatar {
    composes: avatar;
}

.statusIconAvatar .avatarFallback,
.statusIconAvatar .avatarImage {
    mask: radial-gradient(circle .3em at calc(100% - 0.195em) calc(100% - 0.195em), transparent 100%, #000 100%);
    -webkit-mask: radial-gradient(circle .3em at calc(100% - 0.195em) calc(100% - 0.195em), transparent 100%, #000 100%);
}

.persona {
    display: flex;
    padding: 6px;
    align-items: center;
    gap: 12px;
    background: unset;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-default);
    transition-property: background, mixin.focus-ring-transition-properties();

    @include mixin.focus-ring(2px);

    @include mixin.hover {
        background: var(--gray-100);
    }
}

.personaDetails {
    display: flex;
    margin-right: 9px;
    flex-flow: column;
    gap: 3px;

    :is(strong) {
        @include mixin.text(default, $line-height: 18px);

        width: max-content;
        color: var(--foreground-prominent);
    }

    :is(span) {
        // Matches the sibling strong; .personaDetails owns the 18px rhythm.
        @include mixin.text(small, $line-height: 18px);

        color: var(--foreground);
    }
}