/*!
 * ========= 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, 0.85);
  --popover-border-color: #222222;
  --popover-padding: 10px;
  position: fixed;
  display: flex;
  z-index: var(--z-index);
  line-height: 1;
  inset: auto;
  gap: var(--gap);
  margin-block: var(--margin-block);
  margin-inline: var(--margin-inline);
}
.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 {
  line-height: 1;
  display: block;
  position: relative;
  cursor: pointer;
}
.sticky-buttons .sb-link:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--gap) * -1);
  left: calc(var(--gap) * -1);
  inline-size: calc(var(--block-size) + var(--gap) * 2);
  block-size: calc(var(--block-size) + var(--gap) * 2);
}
.sticky-buttons.-shadow {
  --shadow: 0 0 8px rgba(0, 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: 0.25em;
  --br-label: 0.25em;
}
.sticky-buttons.-circle {
  --br-icon: 50%;
  --br-label: 0.25em;
}
.sticky-buttons.-ellipse {
  --br-icon: 25% 75%;
  --br-label: 0.25em;
}

.sticky-buttons li {
  --_icon-color: var(--color);
  --_icon-hcolor: var(--bg);
  --_icon-bcolor: var(--bg);
  --_icon-bhcolor: var(--color);
}
.sticky-buttons .sb-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.25em;
  background: var(--_icon-bcolor);
  border-radius: var(--br-icon);
  cursor: pointer;
  color: var(--_icon-color);
  text-align: center;
  transition: all 0.5s;
  inline-size: var(--block-size);
  block-size: var(--block-size);
  box-shadow: var(--shadow);
  font-size: var(--size);
  line-height: 1;
}
.sticky-buttons .sb-icon.has-text-above {
  flex-direction: column-reverse;
}
.sticky-buttons .sb-icon .sb-icon-text {
  font-size: var(--icon-text);
  line-height: 1;
  font-weight: var(--icon-text-weight);
}
.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 button.is-active .sb-icon,
.sticky-buttons a.is-active .sb-icon {
  background: var(--_icon-bhcolor);
  color: var(--_icon-hcolor);
  animation: none;
}
@media (hover: hover) {
  .sticky-buttons button:focus .sb-icon,
  .sticky-buttons button:hover .sb-icon,
  .sticky-buttons a:focus .sb-icon,
  .sticky-buttons a:hover .sb-icon {
    background: var(--_icon-bhcolor);
    color: var(--_icon-hcolor);
    animation: none;
  }
}

.sticky-buttons {
  --_font-family: inherit;
  --_font-style: normal;
  --_font-weight: normal;
  --_label-box: var(--block-size);
  --_label-size: var(--size);
}
.sticky-buttons.-left-top .sb-label, .sticky-buttons.-left-center .sb-label, .sticky-buttons.-left-bottom .sb-label, .sticky-buttons.-right-top .sb-label, .sticky-buttons.-right-center .sb-label, .sticky-buttons.-right-bottom .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 {
  position: absolute;
  padding: 0 10px;
  visibility: hidden;
  background: var(--_label-bcolor);
  color: var(--_label-color);
  border-radius: var(--br-label);
  cursor: pointer;
  opacity: 0;
  white-space: nowrap;
  margin-inline: calc(var(--size) / 2);
  block-size: var(--_label-box);
  line-height: var(--_label-box);
  box-shadow: var(--shadow);
  vertical-align: middle;
  font-size: var(--_label-size);
  font-family: var(--_font-family);
  font-weight: var(--_font-weight);
  font-style: var(--_font-style);
}
.sticky-buttons .sb-label.-visible {
  visibility: visible;
  opacity: 1;
  transform: none !important;
}
.sticky-buttons .sb-label:before {
  position: absolute;
  display: block;
  background-color: inherit;
  transform: translateY(-50%) rotate(45deg);
  content: "";
  inset: 50% auto auto calc(var(--_label-size) / 4 * -1);
  block-size: calc(var(--_label-size) / 2);
  inline-size: calc(var(--_label-size) / 2);
}
.sticky-buttons button.is-active .sb-label,
.sticky-buttons a.is-active .sb-label {
  visibility: visible;
  opacity: 1;
  background: var(--_label-bhcolor);
  color: var(--_label-hcolor);
}
@media (hover: hover) {
  .sticky-buttons button:focus .sb-label,
  .sticky-buttons button:hover .sb-label,
  .sticky-buttons a:focus .sb-label,
  .sticky-buttons a:hover .sb-label {
    visibility: visible;
    opacity: 1;
    background: var(--_label-bhcolor);
    color: var(--_label-hcolor);
  }
}
.sticky-buttons button.is-active .sb-label,
.sticky-buttons a.is-active .sb-label {
  z-index: 2;
}
@media (hover: hover) {
  .sticky-buttons button:focus .sb-label,
  .sticky-buttons button:hover .sb-label,
  .sticky-buttons a:focus .sb-label,
  .sticky-buttons a:hover .sb-label {
    z-index: 3;
  }
}

.sticky-buttons.-left-top, .sticky-buttons.-left-center, .sticky-buttons.-left-bottom, .sticky-buttons.-right-top, .sticky-buttons.-right-center, .sticky-buttons.-right-bottom {
  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-top .sb-label, .sticky-buttons.-right-center .sb-label, .sticky-buttons.-right-bottom .sb-label {
  inset: auto 100% auto auto;
}
.sticky-buttons.-right-top .sb-label:before, .sticky-buttons.-right-center .sb-label:before, .sticky-buttons.-right-bottom .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-left .sb-label, .sticky-buttons.-top-center .sb-label, .sticky-buttons.-top-right .sb-label {
  inset: 100% auto auto 0;
  margin-inline: 0;
  margin-block: 12px;
}
.sticky-buttons.-top-left .sb-label:before, .sticky-buttons.-top-center .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-left .sb-label, .sticky-buttons.-bottom-center .sb-label, .sticky-buttons.-bottom-right .sb-label {
  inset: auto auto 100% 0;
  margin-inline: 0;
  margin-block: 12px;
}
.sticky-buttons.-bottom-left .sb-label:before, .sticky-buttons.-bottom-center .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;
}