/* These classes are used by the app-core React ProfileCircle and also by the
   zaptic-profile-circle wrapper, which renders that React component in light DOM.
   If they are not available in shared CSS, wrapper usages lose fallback colors
   and image loaded/error visibility behaviour. */
.AppCore__ui__ProfileCircle {
    display: inline-block;
    line-height: 0;
    padding-right: var(--ProfileCircle-paddingRight, 0);
}

.AppCore__ui__ProfileCircle-image {
    display: none;
    width: var(--ProfileCircle-size, 39px);
    height: var(--ProfileCircle-size, 39px);
    border-radius: 50%;
    vertical-align: middle;
}

.AppCore__ui__ProfileCircle-image--loaded {
    display: block;
}

.AppCore__ui__ProfileCircle-fallback {
    --LabelledCircle-size: var(--ProfileCircle-size, 39px);
    --LabelledCircle-backgroundColor: var(--ProfileCircle-backgroundColor, var(--grey8));
    --LabelledCircle-textColor: white;
    filter: brightness(var(--ProfileCircle-brightness, 1));
}

.AppCore__ui__ProfileCircle-fallback--inactive {
    --LabelledCircle-backgroundColor: var(--grey-400);
}

.AppCore__ui__ProfileCircle-fallback--purple {
    --LabelledCircle-backgroundColor: var(--purple);
}

.AppCore__ui__ProfileCircle-fallback--blue {
    --LabelledCircle-backgroundColor: var(--blue-500);
}

.AppCore__ui__ProfileCircle-fallback--green {
    --LabelledCircle-backgroundColor: var(--green);
}

.AppCore__ui__ProfileCircle-fallback--pink {
    --LabelledCircle-backgroundColor: var(--pink);
}

.AppCore__ui__ProfileCircle-fallback--orange {
    --LabelledCircle-backgroundColor: var(--orange);
}

.AppCore__ui__ProfileCircle-fallback--red {
    --LabelledCircle-backgroundColor: var(--red);
}

.AppCore__ui__ProfileCircle-deleted {
    width: var(--ProfileCircle-size, 39px);
    height: var(--ProfileCircle-size, 39px);
}