/**
 * Sticky share bar.
 *
 * Only the rules the Sticky Social Icons plugin used to provide itself: the fixed
 * positioning, the flex centering of the links, their dimensions, and the hover
 * tooltips it bundled from microtip. Everything else, the round shape, the colours, the
 * offset and the mobile behaviour, already lives in assets/css/screen.css and stays
 * there. Selectors are kept at the same specificity as the plugin's so those overrides
 * keep winning.
 *
 * @package     Meritis
 * @author      Romain Allard
 * @copyright   Copyright (C) 2026, Romain Allard
 * @link        https://www.romainallard.com
 * @since       1.0.0
 */

/* Container: was position/z-index from the plugin stylesheet, top from its inline <style>. */
#sticky-social-icons-container {
	position: fixed;
	top: 160px;
	z-index: 999;
	text-align: center;
}

#sticky-social-icons-container ul,
#sticky-social-icons-container li {
	margin: 0;
	padding: 0;
}

#sticky-social-icons-container li {
	list-style: none;
}

/*
 * Dimensions and glyph colour came from the plugin settings, printed inline in the page
 * head. The theme stylesheet only forces the background, so the colour has to stay here.
 */
#sticky-social-icons-container li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	transition: 0.1s linear;
}

#sticky-social-icons-container li a:hover,
#sticky-social-icons-container li a:focus {
	color: #fff;
}

/*
 * The plugin also shrank the button by 15% here, but printed its computed value with a
 * comma ("38,25px"), which browsers drop. Only the font size ever applied, so only the
 * font size is reproduced.
 */
@media (max-width: 415px) {
	#sticky-social-icons-container li a {
		font-size: 17px;
	}
}

/* Hover labels: microtip, left position only, scoped to the bar. */
#sticky-social-icons-container [aria-label][data-microtip-position] {
	position: relative;
}

#sticky-social-icons-container [aria-label][data-microtip-position]::before,
#sticky-social-icons-container [aria-label][data-microtip-position]::after {
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transform: translateZ(0);
	transition: all 0.18s ease-in-out;
}

#sticky-social-icons-container [aria-label][data-microtip-position]::before {
	content: "";
	background-size: 100% auto;
}

#sticky-social-icons-container [aria-label][data-microtip-position]::after {
	box-sizing: content-box;
	padding: 0.5em 1em;
	border-radius: 4px;
	background: rgba(17, 17, 17, 0.9);
	color: #fff;
	content: attr(aria-label);
	font-size: 13px;
	white-space: nowrap;
}

#sticky-social-icons-container [aria-label][data-microtip-position]:hover::before,
#sticky-social-icons-container [aria-label][data-microtip-position]:hover::after,
#sticky-social-icons-container [aria-label][data-microtip-position]:focus::before,
#sticky-social-icons-container [aria-label][data-microtip-position]:focus::after {
	opacity: 1;
	pointer-events: auto;
}

#sticky-social-icons-container [data-microtip-position="left"]::before,
#sticky-social-icons-container [data-microtip-position="left"]::after {
	top: 50%;
	right: 100%;
	bottom: auto;
	left: auto;
	transform: translate3d(10px, -50%, 0);
}

#sticky-social-icons-container [data-microtip-position="left"]::before {
	width: 6px;
	height: 18px;
	margin-right: 5px;
	margin-bottom: 0;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E") no-repeat;
}

#sticky-social-icons-container [data-microtip-position="left"]::after {
	margin-right: 11px;
}

#sticky-social-icons-container [data-microtip-position="left"]:hover::before,
#sticky-social-icons-container [data-microtip-position="left"]:hover::after {
	transform: translate3d(0, -50%, 0);
}

@media (max-width: 767px) {
	#sticky-social-icons-container [data-microtip-position]::before,
	#sticky-social-icons-container [data-microtip-position]::after {
		display: none;
	}
}