.helpbar {
  position: fixed;
  z-index: 1000;
  right: 25px;
  bottom: 100px;
  box-sizing: content-box;
  width: 3rem;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 1300px) {
  .helpbar {
    display: none;
  }
}

.helpbar__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-scroll-top {
  background: #3c3c3c;
  color: #f7f7f7;
  padding: .333em;
}

.helpbar__ctrl {
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  background: #3c3c3c;
  border-radius: 50%;
  color: #f7f7f7;

  &:is(:focus, :hover) {
    color: #88ff7e;
  }
}

.helpbar__ctrl::before {
  content: "";
  display: block;
  height: 1.75em;
  width: 1.75em;
  background: currentColor;
  mask: var(--mask-image) center center / 100% auto no-repeat;
}

.helpbar__ctrl--phone {
  --mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2030%22%3E%3Cpath%20d=%22M16.406-.021A13.6%2C13.6%2C0%2C0%2C1%2C30%2C13.573a1.406%2C1.406%2C0%2C0%2C1-2.813%2C0A10.783%2C10.783%2C0%2C0%2C0%2C16.406%2C2.791a1.406%2C1.406%2C0%2C1%2C1%2C0-2.812Zm.469%2C11.25A1.875%2C1.875%2C0%2C1%2C1%2C15%2C13.1%2C1.875%2C1.875%2C0%2C0%2C1%2C16.875%2C11.229ZM15%2C7.01A1.4%2C1.4%2C0%2C0%2C1%2C16.406%2C5.6a7.97%2C7.97%2C0%2C0%2C1%2C7.969%2C7.969%2C1.406%2C1.406%2C0%2C0%2C1-2.812%2C0%2C5.156%2C5.156%2C0%2C0%2C0-5.156-5.156A1.4%2C1.4%2C0%2C0%2C1%2C15%2C7.01ZM6.885.061A2.336%2C2.336%2C0%2C0%2C1%2C9.662%2C1.42l2.344%2C5.625a2.336%2C2.336%2C0%2C0%2C1-.68%2C2.713L8.438%2C12.125a19.8%2C19.8%2C0%2C0%2C0%2C9.416%2C9.416l2.361-2.889a2.338%2C2.338%2C0%2C0%2C1%2C2.713-.68l5.625%2C2.344a2.336%2C2.336%2C0%2C0%2C1%2C1.359%2C2.777L28.506%2C28.25a2.339%2C2.339%2C0%2C0%2C1-2.256%2C1.729A26.252%2C26.252%2C0%2C0%2C1%2C0%2C3.729%2C2.351%2C2.351%2C0%2C0%2C1%2C1.729%2C1.467L6.885.061Z%22%20transform=%22translate%280%200.023%29%22/%3E%3C/svg%3E);
}

.helpbar__ctrl--mail {
  --mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2022.5%22%3E%3Cpath%20d=%22M%202.813%2C0%20A%202.813%2C2.813%200%200%200%201.125%2C5.063%20L%2013.88%2C14.63%20a%201.881%2C1.881%200%200%200%202.24%2C0%20L%2028.87%2C5.063%20A%202.813%2C2.813%200%200%200%2027.19%2C0%20Z%20M%200%2C6.563%20V%2018.75%20a%203.753%2C3.753%200%200%200%203.75%2C3.75%20h%2022.5%20A%203.753%2C3.753%200%200%200%2030%2C18.75%20V%206.563%20L%2017.25%2C16.12%20a%203.744%2C3.744%200%200%201%20-4.5%2C0%20z%22/%3E%3C/svg%3E);
}

.helpbar__ctrl--chat {
  --mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2030%22%3E%3Cpath%20d=%22M25.507%2C36.359A14.871%2C14.871%2C0%2C0%2C0%2C2.109%2C54.3L0%2C62l7.882-2.069a14.821%2C14.821%2C0%2C0%2C0%2C7.1%2C1.808h.007A14.772%2C14.772%2C0%2C0%2C0%2C25.507%2C36.359ZM14.993%2C59.234A12.334%2C12.334%2C0%2C0%2C1%2C8.7%2C57.513l-.449-.268L3.576%2C58.471l1.246-4.56-.295-.469a12.38%2C12.38%2C0%2C1%2C1%2C22.962-6.569A12.494%2C12.494%2C0%2C0%2C1%2C14.993%2C59.234ZM21.77%2C49.98c-.368-.187-2.2-1.085-2.538-1.205s-.589-.187-.837.188-.958%2C1.205-1.179%2C1.46-.435.281-.8.094a10.111%2C10.111%2C0%2C0%2C1-5.056-4.42c-.382-.656.382-.609%2C1.092-2.029a.688.688%2C0%2C0%2C0-.033-.65c-.094-.187-.837-2.016-1.145-2.759-.3-.723-.609-.623-.837-.636s-.462-.013-.71-.013a1.376%2C1.376%2C0%2C0%2C0-.991.462%2C4.174%2C4.174%2C0%2C0%2C0-1.3%2C3.1%2C7.277%2C7.277%2C0%2C0%2C0%2C1.513%2C3.844%2C16.6%2C16.6%2C0%2C0%2C0%2C6.348%2C5.612c2.357%2C1.018%2C3.281%2C1.1%2C4.46.931a3.8%2C3.8%2C0%2C0%2C0%2C2.5-1.768%2C3.107%2C3.107%2C0%2C0%2C0%2C.214-1.768C22.386%2C50.254%2C22.138%2C50.161%2C21.77%2C49.98Z%22%20transform=%22translate%280%20-32%29%22/%3E%3C/svg%3E);
}

.helpbar__label {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}