.hint {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: 6px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 8C16 12.4183 12.4183 16 8 16C3.58173 16 0 12.4183 0 8C0 3.58173 3.58173 0 8 0C12.4183 0 16 3.58173 16 8ZM6.57143 6C6.57143 5.21102 7.21102 4.57143 8 4.57143C8.78898 4.57143 9.42857 5.21102 9.42857 6C9.42857 6.78898 8.78898 7.42857 8 7.42857C7.52662 7.42857 7.14286 7.81233 7.14286 8.28571V9.02455C7.14286 9.49794 7.52662 9.88169 8 9.88169C8.47338 9.88169 8.85714 9.49794 8.85714 9.02455C10.1763 8.65145 11.1429 7.43861 11.1429 6C11.1429 4.26425 9.73575 2.85714 8 2.85714C6.26425 2.85714 4.85714 4.26425 4.85714 6C4.85714 6.47338 5.2409 6.85714 5.71429 6.85714C6.18767 6.85714 6.57143 6.47338 6.57143 6ZM9.14286 12C9.14286 12.6312 8.63119 13.1429 8 13.1429C7.36881 13.1429 6.85714 12.6312 6.85714 12C6.85714 11.3688 7.36881 10.8571 8 10.8571C8.63119 10.8571 9.14286 11.3688 9.14286 12Z' fill='%233B89E4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  position: relative;
  cursor: help;
  border: 0;
  padding: 0;
  background-color: transparent;
  outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

.hint:focus { outline: 2px solid #3B89E4; border-radius: 50%; }
.hint:focus:not(:focus-visible) { outline: none; }
.hint:focus-visible { outline: 2px solid #3B89E4; border-radius: 50%; }

.hint__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);

  background: #111827;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  width: max-content;
  max-width: 260px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;

  z-index: 100;
}

.hint__tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111827;
}

.hint.is-open .hint__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.hint.is-open .hint__tooltip--align-left {
  left: 0;
  transform: translateX(0) translateY(0);
}
.hint.is-open .hint__tooltip--align-left::after {
  left: 8px;
  transform: none;
}

.hint.is-open .hint__tooltip--align-right {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(0);
}
.hint.is-open .hint__tooltip--align-right::after {
  left: auto;
  right: 8px;
  transform: none;
}