:root {
  --joinchat-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3.516%203.516c4.686-4.686%2012.284-4.686%2016.97%200s4.686%2012.283%200%2016.97a12%2012%200%200%201-13.754%202.299l-5.814.735a.392.392%200%200%201-.438-.44l.748-5.788A12%2012%200%200%201%203.517%203.517zm3.61%2017.043.3.158a9.85%209.85%200%200%200%2011.534-1.758c3.843-3.843%203.843-10.074%200-13.918s-10.075-3.843-13.918%200a9.85%209.85%200%200%200-1.747%2011.554l.16.303-.51%203.942a.196.196%200%200%200%20.219.22zm6.534-7.003-.933%201.164a9.84%209.84%200%200%201-3.497-3.495l1.166-.933a.79.79%200%200%200%20.23-.94L9.561%206.96a.79.79%200%200%200-.924-.445l-2.023.524a.797.797%200%200%200-.588.88%2011.754%2011.754%200%200%200%2010.005%2010.005.797.797%200%200%200%20.88-.587l.525-2.023a.79.79%200%200%200-.445-.923L14.6%2013.327a.79.79%200%200%200-.94.23z%22%2F%3E%3C%2Fsvg%3E");
  --joinchat-font: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
}

.joinchat__woo-btn__wrapper {
  clear: both;
}

.joinchat__woo-btn {
  --s: 40px;

  display: inline-block;
  box-sizing: border-box;
  height: var(--s);
  max-width: 100%;
  padding: 0 calc(.5 * var(--s)) 0 var(--s);
  background: #25d366 var(--joinchat-ico) calc(.2 * var(--s)) 50% no-repeat;
  background-size: calc(.6 * var(--s));
  color: #fff;
  border-radius: calc(.5 * var(--s));
  font: 700 calc(.35 * var(--s))/var(--s) var(--joinchat-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 200ms;
}

.joinchat__woo-btn:empty {
  padding-right: 0;
}

.joinchat__woo-btn:hover {
  background-color: #128c7e;
}