/* Personal colors affect profile cards only, never the surrounding website. */
.pa-avatar-wrap {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    vertical-align: middle;
    isolation: isolate;
    overflow: visible;
}

.pa-avatar-wrap > :not(.pa-decoration-frame) {
    grid-area: 1 / 1;
    z-index: 1;
}

.pa-avatar-wrap > .pa-decoration-frame {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

.pa-themed {
    background-color: var(--pa-bg);
    color: var(--pa-text);
}

.profile-identity.pa-themed {
    background: var(--pa-bg);
    border-color: var(--pa-border);
}

.profile-identity.pa-themed :is(h2, h3, strong) {
    color: var(--pa-text);
}

.profile-identity.pa-themed :is(small, .profile-identity-caption, .profile-public-label) {
    color: var(--pa-muted);
}

.pa-themed :is(.account-avatar, .pp-avatar, [data-appearance-avatar]) {
    background: var(--pa-surface);
    border-color: var(--pa-border);
    color: var(--pa-accent);
}

.profile-identity.pa-themed .account-role {
    background: var(--pa-surface);
    border-color: var(--pa-border);
    color: var(--pa-accent);
}

.profile-identity.pa-themed .profile-button {
    border-color: var(--pa-border);
    background: var(--pa-surface);
    color: var(--pa-text);
    transition: none;
}

.profile-identity.pa-themed :focus-visible {
    outline-color: var(--pa-accent);
}

.profile-identity.pa-themed .profile-public-label > span {
    color: var(--pa-accent);
}

.profile-identity.pa-themed .profile-button-primary {
    border-color: var(--pa-accent);
    background: var(--pa-accent);
    color: var(--pa-on-accent);
}

#profile-preview.pa-themed {
    border-color: var(--pa-border);
    background: var(--pa-bg);
    color: var(--pa-text);
}

#profile-preview.pa-themed :is(.pp-name, .pp-error-title, .pp-loading-line, .pp-stat-value) {
    color: var(--pa-text);
}

#profile-preview.pa-themed :is(#pp-title, .pp-note, .pp-stat-label, .pp-status) {
    color: var(--pa-muted);
}

#profile-preview.pa-themed :is(.pp-summary, .pp-privacy) {
    border-color: var(--pa-border);
    background: var(--pa-surface);
    color: var(--pa-text);
}

#profile-preview.pa-themed .pp-role {
    border-color: var(--pa-border);
    background: var(--pa-surface);
    color: var(--pa-accent);
}

#profile-preview.pa-themed .pp-avatar {
    background: var(--pa-surface);
    border-color: var(--pa-bg);
    color: var(--pa-accent);
}

#profile-preview.pa-themed .pp-tabs button {
    color: var(--pa-muted);
}

#profile-preview.pa-themed .pp-tabs button:hover {
    color: var(--pa-text);
    background: transparent;
}

#profile-preview.pa-themed .pp-tabs button[aria-selected="true"] {
    border-bottom-color: var(--pa-accent);
    background: transparent;
    color: var(--pa-text);
}

#profile-preview.pa-themed .pp-retry {
    border-color: var(--pa-accent);
    background: var(--pa-accent);
    color: var(--pa-on-accent);
}

#profile-preview.pa-themed :is(.pp-close, .pp-close:hover) {
    color: var(--pa-text);
}

#profile-preview.pa-themed .pp-owner-link {
    color: var(--pa-accent);
}

#profile-preview.pa-themed .pp-close:hover {
    background: var(--pa-surface);
    border-color: var(--pa-border);
}