/*!
 * ========= INFORMATION ============================
 * - document:  Sticky Buttons Pro
 * - brand:     Wow-Company
 * - brand-url: https://wow-company.com/
 * - store-url: https://wow-estore.com/
 * - author:    Dmytro Lobov
 * - url:       https://wow-estore.com/item/sticky-buttons-pro/
 * ====================================================== */
.sticky-buttons, .sticky-buttons .sb-item, .sticky-buttons .sb-link, .sticky-buttons .sb-sub {
	all: unset;
	box-sizing: border-box;
}

.sticky-buttons {
	--z-index: 9;
	--margin-inline: 0;
	--margin-block: 0;
	--color: #383838;
	--bg: #81d742;
	--block-size: 30px;
	--size: 16px;
	--icon-text: 12px;
	--icon-text-weight: normal;
	--shadow: none;
	--gap: 0px;
	--br-icon: 0;
	--br-label: 0;
	--popover-inline: 270px;
	--popover-size: 16px;
	--popover-block: 550px;
	--popover-backdrop: rgba(0, 0, 0, .85);
	--popover-border-color: #222;
	--popover-padding: 10px;
	display: flex;
	gap: var(--gap);
	inset: auto;
	line-height: 1;
	margin-block: var(--margin-block);
	margin-inline: var(--margin-inline);
	position: fixed;
	z-index: var(--z-index);
}

.sticky-buttons.is-absolute {
	position: absolute;
}

.sticky-buttons.is-static {
	position: relative;
}

@media print {
	.sticky-buttons {
		display: none;
	}
}

.sticky-buttons.is-hidden {
	display: none;
}

.sticky-buttons .sb-item {
	position: relative;
}

.sticky-buttons .sb-link {
	cursor: pointer;
	display: block;
	line-height: 1;
	position: relative;
}

.sticky-buttons .sb-link:after {
	block-size: calc(var(--block-size) + var(--gap) * 2);
	content: "";
	display: block;
	inline-size: calc(var(--block-size) + var(--gap) * 2);
	left: calc(var(--gap) * -1);
	position: absolute;
	top: calc(var(--gap) * -1);
}

.sticky-buttons.-shadow {
	--shadow: 0 0 8px rgba(0, 0, 0, .5);
}

.sticky-buttons.-small {
	--block-size: 30px;
	--size: 16px;
}

.sticky-buttons.-medium {
	--block-size: 40px;
	--size: 20px;
}

.sticky-buttons.-large {
	--block-size: 50px;
	--size: 24px;
}

.sticky-buttons.-custom {
	--size: 24px;
	--block-size: calc(var(--size) * 2);
}

.sticky-buttons.-square {
	--br-icon: 0;
	--br-label: 0;
}

.sticky-buttons.-rsquare {
	--br-icon: .25em;
	--br-label: .25em;
}

.sticky-buttons.-circle {
	--br-icon: 50%;
	--br-label: .25em;
}

.sticky-buttons.-ellipse {
	--br-icon: 25% 75%;
	--br-label: .25em;
}

.sticky-buttons li {
	--_icon-color: var(--color);
	--_icon-hcolor: var(--bg);
	--_icon-bcolor: var(--bg);
	--_icon-bhcolor: var(--color);
}

.sticky-buttons .sb-icon {
	align-items: center;
	background: var(--_icon-bcolor);
	block-size: var(--block-size);
	border-radius: var(--br-icon);
	box-shadow: var(--shadow);
	color: var(--_icon-color);
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	font-size: var(--size);
	inline-size: var(--block-size);
	justify-content: center;
	line-height: 1;
	row-gap: .25em;
	text-align: center;
	transition: all .5s;
}

.sticky-buttons .sb-icon.has-text-above {
	flex-direction: column-reverse;
}

.sticky-buttons .sb-icon .sb-icon-text {
	font-size: var(--icon-text);
	font-weight: var(--icon-text-weight);
	line-height: 1;
}

.sticky-buttons .sb-icon img {
	display: inline-block;
	max-block-size: var(--size);
	max-inline-size: var(--size);
}

.sticky-buttons .sb-icon.sb-img-full img {
	max-block-size: var(--block-size);
	max-inline-size: var(--block-size);
}

.sticky-buttons a.is-active .sb-icon, .sticky-buttons a:focus .sb-icon, .sticky-buttons a:hover .sb-icon, .sticky-buttons button.is-active .sb-icon, .sticky-buttons button:focus .sb-icon, .sticky-buttons button:hover .sb-icon {
	animation: none;
	background: var(--_icon-bhcolor);
	color: var(--_icon-hcolor);
}

.sticky-buttons {
	--_font-family: inherit;
	--_font-style: normal;
	--_font-weight: normal;
	--_label-box: var(--block-size);
	--_label-size: var(--size);
}

.sticky-buttons.-left-bottom .sb-label, .sticky-buttons.-left-center .sb-label, .sticky-buttons.-left-top .sb-label, .sticky-buttons.-right-bottom .sb-label, .sticky-buttons.-right-center .sb-label, .sticky-buttons.-right-top .sb-label {
	inset-block-start: calc(( var(--block-size) - var(--_label-box) ) / 2);
}

.sticky-buttons li {
	--_label-color: var(--bg);
	--_label-hcolor: var(--bg);
	--_label-bcolor: var(--color);
	--_label-bhcolor: var(--color);
}

.sticky-buttons .sb-label {
	background: var(--_label-bcolor);
	block-size: var(--_label-box);
	border-radius: var(--br-label);
	box-shadow: var(--shadow);
	color: var(--_label-color);
	cursor: pointer;
	font-family: var(--_font-family);
	font-size: var(--_label-size);
	font-style: var(--_font-style);
	font-weight: var(--_font-weight);
	line-height: var(--_label-box);
	margin-inline: calc(var(--size) / 2);
	opacity: 0;
	padding: 0 10px;
	position: absolute;
	vertical-align: middle;
	visibility: hidden;
	white-space: nowrap;
}

.sticky-buttons .sb-label.-visible {
	opacity: 1;
	transform: none !important;
	visibility: visible;
}

.sticky-buttons .sb-label:before {
	background-color: inherit;
	block-size: calc(var(--_label-size) / 2);
	content: "";
	display: block;
	inline-size: calc(var(--_label-size) / 2);
	inset: 50% auto auto calc(var(--_label-size) / 4 * -1);
	position: absolute;
	transform: translateY(-50%) rotate(45deg);
}

.sticky-buttons a.is-active .sb-label, .sticky-buttons a:focus .sb-label, .sticky-buttons a:hover .sb-label, .sticky-buttons button.is-active .sb-label, .sticky-buttons button:focus .sb-label, .sticky-buttons button:hover .sb-label {
	background: var(--_label-bhcolor);
	color: var(--_label-hcolor);
	opacity: 1;
	visibility: visible;
}

.sticky-buttons a.is-active .sb-label, .sticky-buttons a:focus .sb-label, .sticky-buttons button.is-active .sb-label, .sticky-buttons button:focus .sb-label {
	z-index: 2;
}

.sticky-buttons a:hover .sb-label, .sticky-buttons button:hover .sb-label {
	z-index: 3;
}

.sticky-buttons.-left-bottom, .sticky-buttons.-left-center, .sticky-buttons.-left-top, .sticky-buttons.-right-bottom, .sticky-buttons.-right-center, .sticky-buttons.-right-top {
	flex-direction: column;
}

.sticky-buttons.-left-top {
	inset: 0 auto auto 0;
}

.sticky-buttons.-left-center {
	inset: 50% auto auto 0;
	transform: translateY(-50%);
}

.sticky-buttons.-left-bottom {
	inset: auto auto 0 0;
}

.sticky-buttons.-right-bottom .sb-label, .sticky-buttons.-right-center .sb-label, .sticky-buttons.-right-top .sb-label {
	inset: auto 100% auto auto;
}

.sticky-buttons.-right-bottom .sb-label:before, .sticky-buttons.-right-center .sb-label:before, .sticky-buttons.-right-top .sb-label:before {
	inset: 50% calc(var(--_label-size) / 4 * -1) auto auto;
}

.sticky-buttons.-right-top {
	inset: 0 0 auto auto;
}

.sticky-buttons.-right-center {
	inset: 50% 0 auto auto;
	transform: translateY(-50%);
}

.sticky-buttons.-right-bottom {
	inset: auto 0 0 auto;
}

.sticky-buttons.-top-center .sb-label, .sticky-buttons.-top-left .sb-label, .sticky-buttons.-top-right .sb-label {
	inset: 100% auto auto 0;
	margin-block: 12px;
	margin-inline: 0;
}

.sticky-buttons.-top-center .sb-label:before, .sticky-buttons.-top-left .sb-label:before, .sticky-buttons.-top-right .sb-label:before {
	inset: 0 auto calc(var(--_label-size) / 4 * -1) auto;
}

.sticky-buttons.-top-left {
	inset: 0 auto auto 0;
}

.sticky-buttons.-top-center {
	inset: 0 auto auto 50%;
	transform: translateX(-50%);
}

.sticky-buttons.-top-right {
	inset: 0 0 auto auto;
}

.sticky-buttons.-top-right .sb-label {
	inset: 100% 0 auto auto;
}

.sticky-buttons.-top-right .sb-label:before {
	inset: 0 calc(var(--_label-size) / 2) calc(var(--_label-size) / 4 * -1) auto;
}

.sticky-buttons.-bottom-center .sb-label, .sticky-buttons.-bottom-left .sb-label, .sticky-buttons.-bottom-right .sb-label {
	inset: auto auto 100% 0;
	margin-block: 12px;
	margin-inline: 0;
}

.sticky-buttons.-bottom-center .sb-label:before, .sticky-buttons.-bottom-left .sb-label:before, .sticky-buttons.-bottom-right .sb-label:before {
	inset: 100% auto calc(var(--_label-size) / 4 * -1) auto;
}

.sticky-buttons.-bottom-left {
	inset: auto auto 0 0;
}

.sticky-buttons.-bottom-center {
	inset: auto auto 0 50%;
	transform: translateX(-50%);
}

.sticky-buttons.-bottom-right {
	inset: auto 0 0 auto;
}

.sticky-buttons.-bottom-right .sb-label {
	inset: auto 0 100% auto;
}

.sticky-buttons.-bottom-right .sb-label:before {
	inset: 100% calc(var(--_label-size) / 2) calc(var(--_label-size) / 4 * -1) auto;
}