@layer components {

    .share {
        display: flex;
        flex-wrap: wrap;
        justify-content: var(--share-align, flex-start);
        gap: var(--spacing-sm);
        max-width: var(--share-max-width, none);
        padding-block: var(--spacing-md);
    }

    .share__heading {
        display: flex;
        align-items: center;
        font-size: var(--font-size-body-sm);
        font-weight: 600;
        color: var(--color-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .share__btn {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        text-decoration: none;
        transition: opacity var(--transition-speed), background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
    }

    .share--radius-sm .share__btn { border-radius: var(--radius-sm); }
    .share--radius-md .share__btn { border-radius: var(--radius-md); }
    .share--radius-lg .share__btn { border-radius: var(--radius-lg); }
    .share--radius-pill .share__btn { border-radius: 9999px; padding-inline: var(--spacing-md); }
    .share--radius-pill .share__btn--icon-only { border-radius: 50%; aspect-ratio: 1; padding: 0; width: var(--share-icon-only-size, 2.5rem); justify-content: center; }
    .share--radius-full .share__btn { border-radius: 50%; aspect-ratio: 1; justify-content: center; }

    .share__btn:hover {
        opacity: 0.8;
    }

    .share--brand-hover .share__btn:hover,
    .share--brand-always .share__btn:hover {
        opacity: 1;
    }

    .share__btn svg {
        flex-shrink: 0;
    }

    .share__label {
        white-space: nowrap;
        color: var(--color-text);
        transition: color var(--transition-speed);
        padding-inline-end: var(--spacing-xs);
    }

    .share--filled .share__label,
    .share.share--brand-always.share--brand-bg .share__label {
        color: inherit;
    }

    .share.share--brand-hover.share--brand-bg .share__btn:hover .share__label,
    .share.share--brand-always.share--brand-bg .share__btn:hover .share__label,
    .share.share--brand-always.share--brand-border:not(.share--brand-bg) .share__btn:hover .share__label {
        color: inherit;
    }

    /* Sizes */
    .share--sm .share__btn { padding: var(--share-padding, var(--spacing-md)); gap: var(--spacing-sm); }
    .share--sm .share__btn svg { width: 16px; height: 16px; }
    .share--sm .share__label { font-size: var(--font-size-body-sm); }

    .share--base .share__btn { padding: var(--share-padding, var(--spacing-xs)); }
    .share--base .share__btn svg { width: 18px; height: 18px; }
    .share--base .share__label { font-size: var(--font-size-body); }

    .share--md .share__btn { padding: var(--share-padding, var(--spacing-sm)); }
    .share--md .share__btn svg { width: 20px; height: 20px; }
    .share--md .share__label { font-size: var(--font-size-body); }

    .share--lg .share__btn { padding: var(--share-padding, var(--spacing-md)); }
    .share--lg .share__btn svg { width: 24px; height: 24px; }
    .share--lg .share__label { font-size: var(--font-size-lg); }

    /* Per-icon optical adjustments */
    .share__btn--facebook svg { translate: 1px 0; }
    .share__btn--reddit svg { scale: 1.2; }
    .share__btn--x svg { scale: 0.9; }
    .share__btn--linkedin svg { translate: 0 -1px; }
    .share__btn--pinterest svg { scale: 1.85; }

    /* Filled + primary */
    .share--filled.share--primary .share__btn {
        background: var(--color-primary);
        color: var(--color-on-primary);
    }

    /* Filled + mono */
    .share--filled.share--mono .share__btn {
        background: var(--color-text);
        color: var(--color-background);
    }

    /* Filled + brand */
    .share--filled.share--brand .share__btn {
        background: var(--share-brand, var(--color-primary));
        color: #fff;
    }

    /* Outline + primary */
    .share--outline.share--primary .share__btn {
        background: transparent;
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
    }

    /* Outline + mono */
    .share--outline.share--mono .share__btn {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    /* Outline + brand */
    .share--outline.share--brand .share__btn {
        background: transparent;
        border: 1px solid var(--share-brand, var(--color-primary));
        color: var(--share-brand, var(--color-primary));
    }

    /* Ghost + primary */
    .share--ghost.share--primary .share__btn {
        background: transparent;
        color: var(--color-primary);
    }

    /* Ghost + mono */
    .share--ghost.share--mono .share__btn {
        background: transparent;
        color: var(--color-text);
    }

    /* Ghost + brand */
    .share--ghost.share--brand .share__btn {
        background: transparent;
        color: var(--share-brand, var(--color-primary));
    }

    /* Icon — colored icon, transparent bg, regular border */
    .share--icon.share--primary .share__btn {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-primary);
    }

    .share--icon.share--mono .share__btn {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    .share--icon.share--brand .share__btn {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--share-brand, var(--color-primary));
    }

    /* Brand always — apply brand color to targets */
    .share.share--brand-always.share--brand-bg .share__btn {
        background: var(--share-brand, var(--color-primary));
        color: var(--share-brand-contrast, #fff);
    }

    .share.share--brand-always.share--brand-border .share__btn {
        border-color: var(--share-brand, var(--color-primary));
    }

    .share.share--brand-always:not(.share--brand-bg) .share__btn {
        color: var(--share-brand, currentColor);
    }

    /* Brand always — invert on hover (bg → transparent + brand icon, border → fill bg) */
    .share.share--brand-always.share--brand-bg .share__btn:hover {
        background: transparent;
        color: var(--share-brand, var(--color-primary));
    }

    .share.share--brand-always.share--brand-border:not(.share--brand-bg) .share__btn:hover {
        background: var(--share-brand, var(--color-primary));
        color: var(--share-brand-contrast, #fff);
        border-color: var(--share-brand, var(--color-primary));
    }

    /* Brand hover — apply brand to exactly the declared targets on hover */
    .share.share--brand-hover.share--brand-bg .share__btn:hover {
        background: var(--share-brand, var(--color-primary));
        color: var(--share-brand-contrast, #fff);
    }

    .share.share--brand-hover.share--brand-border .share__btn:hover {
        border-color: var(--share-brand, var(--color-primary));
    }

    .share.share--brand-hover:not(.share--brand-bg) .share__btn:hover {
        color: var(--share-brand, currentColor);
    }

    /* Copy button feedback */
    .share__btn--copy.is-copied {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Dark mode — flip black brand colors to white */
    body.dark .share__btn--x,
    body.dark .share__btn--threads {
        --share-brand: #fff;
    }

    @media print {
        .share {
            display: none;
        }
    }
}