/* ─── Share Buttons — ps-shr-* ────────────────────────────────────────────
   All visual values come from CSS custom properties set inline by the
   renderer. This file contains only structural rules and property
   consumers. Nothing is hardcoded except layout structure.

   Two renderers drive these styles and must produce the same DOM:
     - ShareRenderer         (page-level share from cms_share_configs)
     - IconGroupShareRenderer (ui/icon-group-share tree node)
   ─────────────────────────────────────────────────────────────────────── */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.ps-shr-shell {
    box-sizing: border-box;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Floating */
.ps-shr-shell.ps-shr-mode-floating {
    position: fixed;
    flex-direction: column;
    align-items: flex-start;
}

/* Inline */
.ps-shr-shell.ps-shr-mode-inline {
    position: relative;
    width: 100%;
}

/* Sticky */
.ps-shr-shell.ps-shr-mode-sticky {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
}

.ps-shr-shell.ps-shr-mobile-only { display: none; }
@media (max-width: 768px) {
    .ps-shr-shell.ps-shr-mobile-only { display: flex; }
}

/* Builder empty state — rendered by IconGroupShareRenderer::_renderEmptyBuilder() */
.ps-shr-empty-shell {
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.06);
}

/* ── Headline ──────────────────────────────────────────────────────────── */
.ps-shr-headline {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    text-align: center;
}

/* beside: shell switches to row, headline left-aligned */
.ps-shr-shell[data-headline-pos="beside"] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.ps-shr-shell[data-headline-pos="beside"] .ps-shr-headline {
    text-align: left;
}

/* ── Plate (inline/sticky: explicit wrapper div) ─────────────────────────
   Minimal by design — the plate is a light frame, not a card. Default
   plate_show is false; when the user opts in, this is what they get.
   ─────────────────────────────────────────────────────────────────────── */
.ps-shr-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    background:    var(--ps-shr-plate-bg, #ffffff);
    border-radius: var(--ps-shr-plate-radius, 16px);
    padding:       0.65rem 0.9rem;
    box-shadow:    0 0 0 1px rgba(15, 23, 42, 0.06);
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

/* Inline shell centres the plate */
.ps-shr-shell.ps-shr-mode-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Floating plate: on .ps-shr-group directly */
.ps-shr-shell.ps-shr-mode-floating.ps-shr-has-plate .ps-shr-group {
    background:    var(--ps-shr-plate-bg, #ffffff);
    border-radius: var(--ps-shr-plate-radius, 16px);
    padding:       0.5rem 0.7rem;
    box-shadow:    0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Sticky plate: on .ps-shr-shell itself */
.ps-shr-shell.ps-shr-mode-sticky.ps-shr-has-plate {
    background:    var(--ps-shr-plate-bg, #ffffff);
    box-shadow:    0 -1px 0 rgba(15, 23, 42, 0.06);
}

/* ── Group ─────────────────────────────────────────────────────────────── */
.ps-shr-group {
    display: flex;
    gap:     var(--ps-shr-gap, 0.75rem);
    flex-wrap: wrap;
    align-items: center;
}

.ps-shr-group.ps-shr-dir-vertical    { flex-direction: column; }
.ps-shr-group.ps-shr-dir-horizontal  { flex-direction: row;    }

/* Inline/sticky group fills the plate/shell width and justifies center by default */
.ps-shr-shell.ps-shr-mode-inline  .ps-shr-group,
.ps-shr-shell.ps-shr-mode-sticky  .ps-shr-group {
    justify-content: center;
}

/* When a plate wrapper is present inline, the group still needs to flex correctly */
.ps-shr-plate .ps-shr-group {
    justify-content: center;
}

/* ── Items (shared <a> and <button>) ───────────────────────────────────── */
.ps-shr-item {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    flex-shrink:     0;
    background:      var(--ps-shr-item-bg, #64748b);
    color:           var(--ps-shr-glyph-color, #ffffff);
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    padding:         var(--ps-shr-icon-padding, 0.5rem);
    border-radius:   var(--ps-shr-radius-tl, 8px)
                     var(--ps-shr-radius-tr, 8px)
                     var(--ps-shr-radius-br, 8px)
                     var(--ps-shr-radius-bl, 8px);
    transition:      background var(--ps-shr-trans-dur, 0.2s) ease,
                     transform  var(--ps-shr-trans-dur, 0.2s) ease,
                     box-shadow var(--ps-shr-trans-dur, 0.2s) ease;
    -webkit-font-smoothing: antialiased;
    box-sizing:      border-box;
    line-height:     1;
    font-family:     inherit;
    font-size:       var(--ps-shr-icon-size, 1.25rem);
    box-shadow:      0 5px 16px rgba(0, 0, 0, 0.18);
}

.ps-shr-item:hover,
.ps-shr-item:focus-visible {
    background: var(--ps-shr-item-hover);
    transform:  scale(1.08);
    outline:    none;
}

/* Global hover ring */
.ps-shr-shell.ps-shr-global-hover .ps-shr-item:hover {
    box-shadow: 0 0 0 4px rgba(
        var(--ps-shr-hover-ring-r,   79),
        var(--ps-shr-hover-ring-g,   70),
        var(--ps-shr-hover-ring-b,  229),
        var(--ps-shr-hover-ring-opacity, 0.28)
    );
}

/* ── Icon SVG ──────────────────────────────────────────────────────────── */
.ps-shr-icon {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       var(--ps-shr-icon-size, 1.25rem);
    height:      var(--ps-shr-icon-size, 1.25rem);
    flex-shrink: 0;
    line-height: 0;
}

.ps-shr-icon svg {
    width:   100%;
    height:  100%;
    fill:    currentColor;
    color:   var(--ps-shr-glyph-color, #ffffff);
    display: block;
}

/* ── Labels — inside mode ──────────────────────────────────────────────── */
.ps-shr-shell.ps-shr-labels-inside .ps-shr-item {
    gap: 0.35rem;
}

.ps-shr-shell.ps-shr-labels-inside.ps-shr-label-edge-right  .ps-shr-item { flex-direction: row;            }
.ps-shr-shell.ps-shr-labels-inside.ps-shr-label-edge-left   .ps-shr-item { flex-direction: row-reverse;    }
.ps-shr-shell.ps-shr-labels-inside.ps-shr-label-edge-bottom .ps-shr-item { flex-direction: column;         }
.ps-shr-shell.ps-shr-labels-inside.ps-shr-label-edge-top    .ps-shr-item { flex-direction: column-reverse; }

.ps-shr-shell.ps-shr-labels-inside .ps-shr-label {
    font-size:   0.7rem;
    font-weight: 700;
    color:       var(--ps-shr-glyph-color, #ffffff);
    white-space: nowrap;
    line-height: 1;
}

/* ── Labels — outside mode ─────────────────────────────────────────────── */
.ps-shr-item-wrap {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
}

.ps-shr-shell.ps-shr-labels-outside.ps-shr-label-edge-right  .ps-shr-item-wrap { flex-direction: row;            }
.ps-shr-shell.ps-shr-labels-outside.ps-shr-label-edge-left   .ps-shr-item-wrap { flex-direction: row-reverse;    }
.ps-shr-shell.ps-shr-labels-outside.ps-shr-label-edge-bottom .ps-shr-item-wrap { flex-direction: column;         }
.ps-shr-shell.ps-shr-labels-outside.ps-shr-label-edge-top    .ps-shr-item-wrap { flex-direction: column-reverse; }

.ps-shr-shell.ps-shr-labels-outside .ps-shr-label {
    font-size:   0.7rem;
    font-weight: 600;
    color:       #475569;
    white-space: nowrap;
    line-height: 1;
}

/* ── Count badge ───────────────────────────────────────────────────────── */
.ps-shr-count {
    position:        absolute;
    min-width:       16px;
    height:          16px;
    padding:         0 3px;
    border-radius:   8px;
    background:      #ffffff;
    color:           #334155;
    font-size:       9px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 6px rgba(0, 0, 0, 0.20);
    pointer-events:  none;
    line-height:     1;
    box-sizing:      border-box;
}

.ps-shr-count-tr { top:    -4px; right:  -4px; }
.ps-shr-count-tl { top:    -4px; left:   -4px; }
.ps-shr-count-br { bottom: -4px; right:  -4px; }
.ps-shr-count-bl { bottom: -4px; left:   -4px; }

/* ── Reactions (like / vote_up / vote_down) ────────────────────────────
   Reactions are <button> elements (state toggles) rather than anchors
   (navigate away). Two SVGs are shipped per button — outline + filled —
   and the .is-active class swaps which one is visible.

   The "active" palette is set via --ps-shr-item-active-bg (background)
   and --ps-shr-glyph-active-color (icon fill). Both are per-item vars
   emitted by the renderer, defaulting to the catalog's activeColor /
   activeGlyphColor. When unset, the button keeps its inactive palette
   so an unconfigured reaction still renders legibly.
   ────────────────────────────────────────────────────────────────────── */

.ps-shr-item.ps-shr-reaction {
    /* Button-specific resets — no anchor defaults to inherit from */
    border: none;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;

    /* Active state color vars — set per item by the renderer.
       Fall back to the base colors so an unconfigured reaction is
       still fully visible when activated. */
    --ps-shr-item-active-bg:        var(--ps-shr-item-bg, #64748b);
    --ps-shr-glyph-active-color:    var(--ps-shr-glyph-color, #ffffff);
}

/* Icon swap — inactive shows outline, active shows filled */
.ps-shr-item.ps-shr-reaction .ps-shr-icon-on  { display: none; }
.ps-shr-item.ps-shr-reaction .ps-shr-icon-off { display: flex; }

.ps-shr-item.ps-shr-reaction.is-active {
    background: var(--ps-shr-item-active-bg);
    color:      var(--ps-shr-glyph-active-color);
}

.ps-shr-item.ps-shr-reaction.is-active .ps-shr-icon-off { display: none; }
.ps-shr-item.ps-shr-reaction.is-active .ps-shr-icon-on  { display: flex; }

/* The filled SVG uses the active glyph var, not the base one. This is
   what makes a like button's heart flip from slate to white when active. */
.ps-shr-item.ps-shr-reaction.is-active .ps-shr-icon-on svg {
    color: var(--ps-shr-glyph-active-color);
}

/* Focus ring uses the item hover color so the keyboard affordance
   matches the pointer affordance. */
.ps-shr-item.ps-shr-reaction:focus-visible {
    outline: 2px solid var(--ps-shr-item-hover, #4f46e5);
    outline-offset: 2px;
}

/* ── Toast (copy feedback) ─────────────────────────────────────────────── */
.ps-shr-toast {
    position:      fixed;
    bottom:        24px;
    left:          50%;
    transform:     translateX(-50%) translateY(12px);
    background:    #1e293b;
    color:         #f8fafc;
    font-size:     0.78rem;
    font-weight:   600;
    padding:       0.55rem 1.1rem;
    border-radius: 999px;
    box-shadow:    0 8px 24px rgba(0, 0, 0, 0.22);
    opacity:       0;
    pointer-events: none;
    transition:    opacity 0.22s ease, transform 0.22s ease;
    z-index:       9999;
    white-space:   nowrap;
}

.ps-shr-toast.ps-shr-toast-on {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}