@layer components {
    .family-avatar {
        color: var(--avatar-color);
    }

    /* Icons inherit the selected hue; swatches and saved avatars set their own. */
    [data-avatar-color='teal'], .family-appearance-picker:has(input[name='color'][value='teal']:checked) {
        --avatar-color: var(--avatar-teal);
    }
    [data-avatar-color='coral'], .family-appearance-picker:has(input[name='color'][value='coral']:checked) {
        --avatar-color: var(--avatar-coral);
    }
    [data-avatar-color='gold'], .family-appearance-picker:has(input[name='color'][value='gold']:checked) {
        --avatar-color: var(--avatar-gold);
    }
    [data-avatar-color='blue'], .family-appearance-picker:has(input[name='color'][value='blue']:checked) {
        --avatar-color: var(--avatar-blue);
    }
    [data-avatar-color='violet'], .family-appearance-picker:has(input[name='color'][value='violet']:checked) {
        --avatar-color: var(--avatar-violet);
    }
    [data-avatar-color='rose'], .family-appearance-picker:has(input[name='color'][value='rose']:checked) {
        --avatar-color: var(--avatar-rose);
    }
}