/* Share buttons component */

.share-buttons {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    flex-wrap: wrap;
}

.share-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-inverse);
    background-color: var(--color-text-muted);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-smooth) var(--ease-smooth);
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, box-shadow;
    position: relative;
}

/* Subtle shine effect on hover */
.share-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-smooth) var(--ease-smooth);
}

.share-button:hover {
    transform: translate3d(0, -2px, 0) scale(1.05);
    box-shadow: var(--elevation-medium);
}

.share-button:hover::before {
    opacity: 1;
}

@supports (color: color-mix(in srgb, white, black)) {
    .share-button:hover {
        background-color: color-mix(in srgb, var(--color-text-muted) 90%, black);
    }
}

.share-button:active {
    transform: translate3d(0, 0, 0) scale(0.95);
}

/* Platform brand colors (scoped vars for optional overrides) */
.share-button.share-twitter {
    background-color: var(--share-twitter, #1da1f2);
}

@supports (color: color-mix(in srgb, white, black)) {
    .share-button.share-twitter:hover {
        background-color: color-mix(in srgb, #1da1f2 90%, black);
    }
}

.share-button.share-facebook {
    background-color: var(--share-facebook, #1877f2);
}

@supports (color: color-mix(in srgb, white, black)) {
    .share-button.share-facebook:hover {
        background-color: color-mix(in srgb, #1877f2 90%, black);
    }
}

.share-button.share-linkedin {
    background-color: var(--share-linkedin, #0077b5);
}

@supports (color: color-mix(in srgb, white, black)) {
    .share-button.share-linkedin:hover {
        background-color: color-mix(in srgb, #0077b5 90%, black);
    }
}

.share-button.share-reddit {
    background-color: var(--share-reddit, #ff4500);
}

@supports (color: color-mix(in srgb, white, black)) {
    .share-button.share-reddit:hover {
        background-color: color-mix(in srgb, #ff4500 90%, black);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .share-button {
        transition: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .share-button::before {
        display: none;
    }
}
