@charset "utf-8";
@import (optional, reference) "var.less";
/*Avatar*/
AX-AVATAR {
    --_fs-avatar: var(--_fs);
    --_width-avatar: var(--_sz-input);
    --_r-avatar: calc(var(--_width-avatar)/4);
    --_c-avatar-txt: var(--_c-text-aj);
    --_c-avatar-bg: var(--_c-ignore-bg);
    border-radius: clamp(var(--_r), var(--_r-avatar), var(--_r-lg));
    vertical-align: middle;
    display: inline-flex;
    [rep=wrap] {
        font-size: var(--_fs-avatar);
        color: var(--_c-avatar-txt);
        width: var(--_width-avatar);
        aspect-ratio: 1/1;
        background-color: var(--_c-avatar-bg);
        border-radius: inherit;
        box-sizing: border-box;
        .v3-flex-center(inline-flex);
        position: relative;
    }
    img {
        .posterImg;
    }
    AX-BADGE {
        box-shadow: 0 0 0 .2rem #fff;
        position: absolute;
        right: -0.8rem;
        top: -0.8rem;
    }
    AX-BADGE:empty {
        right: -0.2rem;
        top: -0.2rem;
    }
    [rep="tips"] {
        font-size: var(--_sz-ignore);
        color: #fff;
        width: 100%;
        height: 100%;
        line-height: 1.286em;
        border-radius: inherit;
        background-color: rgba(0, 0, 0, var(--_o-mask));
        .v3-flex-center(flex);
        flex-wrap: wrap;
        position: absolute;
        left: 0;
        top: 0;
    }
    &[size=xxs] {
        --_fs-avatar: var(--_sz-ignore);
        --_width-avatar: var(--_sz-list);
    }
    &[size=xs] {
        --_fs-avatar: var(--_sz-ignore);
        --_width-avatar: var(--_sz-body);
    }
    &[size=sm] {
        --_width-avatar: var(--_sz-input);
    }
    &[size=md] {
        --_width-avatar: calc(var(--_sz-body)*2);
    }
    &[size=lg] {
        --_fs-avatar: 1.6rem;
        --_width-avatar: calc(var(--_sz-body)*3);
    }
    &[size=xl] {
        --_fs-avatar: 1.8rem;
        --_width-avatar: calc(var(--_sz-body)*4);
    }
    &[size=xxl] {
        --_fs-avatar: 2.2rem;
        --_width-avatar: calc(var(--_sz-body)*5);
    }
    &:where([size=xs]) [rep=mask],
    &:where([size=sm]) [rep=mask] {
        font-size: var(--_sz-ignore);
    }
    &[shape=square] {
        border-radius: 0;
    }
    &[shape=round] {
        border-radius: 100%;
    }
    &[theme=prim],
    &[theme=error],
    &[theme=succ],
    &[theme=info],
    &[theme=issue],
    &[theme=text] {
        --_c-avatar-txt: var(--_c-stage);
    }
    &[theme=prim] {
        --_c-avatar-bg: var(--_c-prim);
    }
    &[theme=error] {
        --_c-avatar-bg: var(--_c-error);
    }
    &[theme=succ] {
        --_c-avatar-bg: var(--_c-succ);
    }
    &[theme=info] {
        --_c-avatar-bg: var(--_c-info);
    }
    &[theme=warn] {
        --_c-avatar-bg: var(--_c-warn);
    }
    &[theme=issue] {
        --_c-avatar-bg: var(--_c-issue);
    }
    &[theme=text] {
        --_c-avatar-bg: var(--_c-text);
    }
    &[theme=prim-lt] {
        --_c-avatar-bg: var(--_c-prim-bg);
        --_c-avatar-txt: var(--_c-prim-dp);
    }
    &[theme=error-lt] {
        --_c-avatar-bg: var(--_c-error-bg);
        --_c-avatar-txt: var(--_c-error-dp);
    }
    &[theme=succ-lt] {
        --_c-avatar-bg: var(--_c-succ-bg);
        --_c-avatar-txt: var(--_c-succ-dp);
    }
    &[theme=info-lt] {
        --_c-avatar-bg: var(--_c-info-bg);
        --_c-avatar-txt: var(--_c-info-dp);
    }
    &[theme=issue-lt] {
        --_c-avatar-bg: var(--_c-issue-bg);
        --_c-avatar-txt: var(--_c-issue-dp);
    }
    &[theme=warn-lt] {
        --_c-avatar-bg: var(--_c-warn-bg);
        --_c-avatar-txt: var(--_c-text);
    }
    &[theme=text-lt] {
        --_c-avatar-bg: var(--_c-text-bg);
        --_c-avatar-txt: var(--_c-text);
    }
}
