/**
FileName: assets/css/actions.css
Version: 1.0.1
Written based on the version: 1.0.0
Purpose: Styles for post action bar: share links, like/dislike/bookmark buttons,
         deterministic hidden-state support and responsive layout.

Decision Log:
1.0.1 NEW: Larger brand icons (20px) with hover-only label reveal.
1.0.1 NEW: Stronger reset for engagement buttons against theme pollution.
1.0.1 NEW: Share group right-aligned, engagement left-aligned on desktop.
1.0.0 NEW: Isolated action bar styling without touching main comment styles.
1.0.0 NEW: Hidden-state reset for transient elements.
1.0.0 NEW: Theme-pollution-resistant button styles.

Dependencies: tokens.css, style.css
Impact Map: Frontend action bar
Used By: templates/action-bar.php
Namespace-location: .asun-interaction-action-* classes
Owner: A-SUN Studio
*/

/* ═══════════════════════════════════════════════════════════
HIDDEN STATE RESET
═══════════════════════════════════════════════════════════ */

.asun-interaction-block [hidden],
.asun-interaction-toast[hidden] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
ACTION BAR
═══════════════════════════════════════════════════════════ */

.asun-interaction-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--asun-space-3);
    padding: var(--asun-space-3) var(--asun-space-4);
    border: 1px solid var(--asun-border);
    border-color: color-mix(in srgb, currentColor 14%, transparent);
    border-radius: var(--asun-radius);
    margin-bottom: var(--asun-space-4);
    background: transparent;
}

.asun-interaction-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--asun-space-2);
}

/* ═══════════════════════════════════════════════════════════
SHARE LINKS
═══════════════════════════════════════════════════════════ */

.asun-interaction-share-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.asun-interaction-share-link,
.asun-interaction-action-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 6px !important;
    border: 1px solid transparent !important;
    border-radius: var(--asun-radius) !important;
    background: transparent !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.25s ease !important;
    min-height: 34px !important;
    overflow: hidden !important;
}

.asun-interaction-share-link svg {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

.asun-interaction-share-link:hover {
    border-color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

.asun-interaction-share-link:focus-visible,
.asun-interaction-action-button:focus-visible {
    outline: 2px solid var(--asun-focus) !important;
    outline-offset: 2px !important;
}

/* Label hidden by default, revealed on hover */
.asun-interaction-share-label {
    display: inline-block !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    font-size: 0.76rem !important;
    transition: max-width 0.3s ease, opacity 0.25s ease, margin 0.3s ease !important;
    margin-inline-start: 0 !important;
}

.asun-interaction-share-link:hover .asun-interaction-share-label {
    max-width: 120px !important;
    opacity: 1 !important;
    margin-inline-start: 6px !important;
}

/* Brand colors */
.asun-interaction-share-link.is-linkedin {
    color: #0a66c2 !important;
}

.asun-interaction-share-link.is-gmail {
    color: #ea4335 !important;
}

.asun-interaction-share-link.is-telegram {
    color: #229ed9 !important;
}

.asun-interaction-share-link.is-whatsapp {
    color: #25d366 !important;
}

.asun-interaction-share-link.is-x {
    color: #14171a !important;
}

@media (prefers-color-scheme: dark) {
    .asun-interaction-share-link.is-x {
        color: #e7e9ea !important;
    }
}

/* ═══════════════════════════════════════════════════════════
ENGAGEMENT BUTTONS
═══════════════════════════════════════════════════════════ */

.asun-interaction-engagement-caption {
    font-size: 0.82rem !important;
    opacity: 0.7 !important;
    margin-inline-end: 4px !important;
}

.asun-interaction-action-button {
    min-width: 44px !important;
    gap: 4px !important;
}

.asun-interaction-action-button:hover {
    border-color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

.asun-interaction-action-button.is-active {
    border-color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
}

.asun-interaction-action-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.asun-interaction-action-count {
    min-width: 16px !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    opacity: 0.85 !important;
    font-variant-numeric: tabular-nums !important;
}

.asun-interaction-action-button .astudio-icon-slot,
.asun-interaction-share-link svg {
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .asun-interaction-action-bar {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--asun-space-3) !important;
    }

    .asun-interaction-action-group {
        width: 100% !important;
        justify-content: center !important;
    }

    .asun-interaction-share-links {
        justify-content: center !important;
    }

    .asun-interaction-share-label {
        max-width: 0 !important;
        opacity: 0 !important;
    }

    .asun-interaction-share-link:hover .asun-interaction-share-label {
        max-width: 120px !important;
        opacity: 1 !important;
    }
}