/*
  Shared DerDieDas help tooltip.

  Original Article Trainer pattern:
  <button class="app-tooltip__trigger" type="button" aria-label="Help text">?</button>
  <div class="app-tooltip__content">Help text</div>

  For card/block corner placement:
  <div class="app-tooltip__anchor">
    <button class="app-tooltip__trigger" type="button" aria-label="Help text">?</button>
    <div class="app-tooltip__content">Help text</div>
  </div>
*/

.app-tooltip__trigger,
.app-tooltip__trigger * {
  cursor: default;
}

.app-tooltip__help-button {
  display: inline-flex;
  width: 18px;
  height: 18px;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #bfc8d6;
  border-radius: 50%;
  background: #ffffff;
  color: #526176;
  box-shadow: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.app-tooltip__content {
  position: absolute;
  left: var(--app-tooltip-left, 84px);
  right: var(--app-tooltip-right, auto);
  top: var(--app-tooltip-top, auto);
  bottom: var(--app-tooltip-bottom, calc(100% + 8px));
  z-index: var(--app-tooltip-z-index, 4);
  display: none;
  width: max-content;
  min-width: 100px;
  max-width: 230px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 223, 211, 0.94);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 33, 55, 0.10);
  color: #526176;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

.app-tooltip__trigger:hover + .app-tooltip__content,
.app-tooltip__trigger:focus + .app-tooltip__content,
.app-tooltip__trigger:focus-visible + .app-tooltip__content,
.app-tooltip__trigger:hover + .app-tooltip__content,
.app-tooltip__trigger:focus + .app-tooltip__content,
.app-tooltip__trigger:focus-visible + .app-tooltip__content {
  display: block;
}

.app-tooltip-host {
  position: relative;
}

.app-tooltip__anchor {
  position: absolute;
  top: var(--app-tooltip-anchor-top, 4px);
  right: var(--app-tooltip-anchor-right, 8px);
  bottom: var(--app-tooltip-anchor-bottom, auto);
  left: var(--app-tooltip-anchor-left, auto);
  z-index: var(--app-tooltip-anchor-z-index, 35);
  width: 18px;
  height: 18px;
  display: block;
  --app-tooltip-left: auto;
  --app-tooltip-right: 0;
  --app-tooltip-bottom: calc(100% + 8px);
  --app-tooltip-z-index: 400;
}

.app-tooltip__anchor .app-tooltip__help-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;

}