/**
 * Project:   Social Share Buttons by MediaArt
 * File:      social-share-buttons-by-mediaart/assets/css/ssb-style.css
 * Version:   1.0.1
 * Description: Frontend styles for Social Share Buttons panel.
 *
 * @package Social_Share_Buttons_by_MediaArt
 */

#ssb-panel.ssb-panel{
    position: fixed;
    z-index: 999999;
    pointer-events: auto;
    overflow: visible;
    box-sizing: border-box;
}


#ssb-panel .ssb-inner{
    display:flex;
    gap:8px;
    box-sizing:border-box;
    align-items:center;
}


#ssb-panel .ssb-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* hit area */
    line-height: 0;
}

#ssb-panel .ssb-icon{
    display: block;
    max-width: 100%;
    height: auto;
}

/* Slide-out label (hidden by default). */
#ssb-panel .ssb-label{
    position: absolute;
    white-space: nowrap;
    max-width: min(240px, calc(100vw - 80px));
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    background: var(--ssb-button-color, #000);
    color: var(--ssb-text-color, #fff);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 2;
}

/* Show label on hover/focus for accessibility. */
#ssb-panel .ssb-btn:hover .ssb-label,
#ssb-panel .ssb-btn:focus .ssb-label,
#ssb-panel .ssb-btn:focus-visible .ssb-label{
    opacity: 1;
    visibility: visible;
}


/* Keep panel hidden until JS decides the active mode/position to avoid "flash" (desktop then mobile). */
#ssb-panel{
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
}
#ssb-panel.ssb-ready{
    opacity: 1;
    visibility: visible;
}

/* Active position is driven by JS via:
   data-ssb-mode="desktop|mobile" and data-ssb-position="left|right|bottom".
   Offsets are taken from CSS variables (desktop/mobile). */

#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="left"]{
    left: var(--ssb-lr-x-desktop, 10px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-desktop, 0px)));
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="left"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="right"]{
    right: var(--ssb-lr-x-desktop, 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-desktop, 0px)));
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="right"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="bottom"]{
    left: 0;
    right: 0;
    bottom: var(--ssb-bottom-y-desktop, 10px);
    top: auto;
    transform: none;
    padding-left: calc(env(safe-area-inset-left) + 8px);
    padding-right: calc(env(safe-area-inset-right) + 8px);
    box-sizing: border-box;
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="bottom"] .ssb-inner{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(var(--ssb-bottom-x-desktop, 0px));
}


#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="left"]{
    left: var(--ssb-lr-x-mobile, 10px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-mobile, 0px)));
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="left"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="right"]{
    right: var(--ssb-lr-x-mobile, 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-mobile, 0px)));
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="right"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="bottom"]{
    left: 0;
    right: 0;
    bottom: var(--ssb-bottom-y-mobile, 10px);
    top: auto;
    transform: none;
    padding-left: calc(env(safe-area-inset-left) + 8px);
    padding-right: calc(env(safe-area-inset-right) + 8px);
    box-sizing: border-box;
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="bottom"] .ssb-inner{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(var(--ssb-bottom-x-mobile, 0px));
}


/* Label placement follows active position (so it doesn't end up over the icon). */
#ssb-panel[data-ssb-position="left"] .ssb-label{
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
}
#ssb-panel[data-ssb-position="left"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-ssb-position="left"] .ssb-btn:focus .ssb-label,
#ssb-panel[data-ssb-position="left"] .ssb-btn:focus-visible .ssb-label{
    transform: translateY(-50%) translateX(0);
}

#ssb-panel[data-ssb-position="right"] .ssb-label{
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
}
#ssb-panel[data-ssb-position="right"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-ssb-position="right"] .ssb-btn:focus .ssb-label,
#ssb-panel[data-ssb-position="right"] .ssb-btn:focus-visible .ssb-label{
    transform: translateY(-50%) translateX(0);
}

#ssb-panel[data-ssb-position="bottom"] .ssb-label{
    left: 50%;
    right: auto;
    bottom: calc(100% + 8px);
    top: auto;
    transform: translateX(-50%) translateY(6px);
}
#ssb-panel[data-ssb-position="bottom"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-ssb-position="bottom"] .ssb-btn:focus .ssb-label,
#ssb-panel[data-ssb-position="bottom"] .ssb-btn:focus-visible .ssb-label{
    transform: translateX(-50%) translateY(0);
}