[data-tooltip] {
  cursor: pointer;
  pointer-events: all;
}

button[is=tool-tip] {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: all;
}
button[is=tool-tip] tool-tip-symbol {
  display: inline-flex;
  border-radius: 50%;
  background-color: var(--tool-tip-background-colour, #FDC705);
  place-items: center;
  place-content: center;
  font-weight: 700;
  width: 1em;
  height: 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color var(--transition);
}
button[is=tool-tip] tool-tip-symbol svg {
  width: 0.6em;
  height: 0.6em;
  pointer-events: none;
}
button[is=tool-tip] tool-tip-symbol svg:not(.symbol) {
  fill: white;
}
button[is=tool-tip]:not(.button):not(.white) tool-tip-symbol {
  color: white;
}
button[is=tool-tip].has\:title tool-tip-symbol {
  margin-left: 1ch;
}
button[is=tool-tip]:not(.has\:symbol) tool-tip-symbol {
  font-size: 0.9em;
  padding: 0.6em;
}
@media (hover: hover) {
  button[is=tool-tip]:hover {
    --tool-tip-background-colour: #ff715c;
  }
}

tool-tip {
  all: initial;
}
tool-tip:empty {
  display: none;
}
tool-tip {
  box-sizing: border-box;
  position: absolute;
  overflow: auto;
  font: normal 400 14px/1.6 "Open Sans", sans-serif;
  z-index: 56;
  top: var(--y);
  left: var(--x);
  width: -moz-max-content;
  width: max-content;
  max-width: 500px;
  background-color: rgba(95, 95, 95, 0.9);
  backdrop-filter: blur(4px) saturate(150%);
  border-radius: calc(var(--border-radius) / 2);
  padding: var(--gutter0) var(--gutter1);
  margin-top: var(--tool-tip-start-position-y, 2em);
  margin-left: var(--tool-tip-start-position-x, 0em);
  opacity: 0;
  overscroll-behavior: contain;
  transition: opacity var(--transition);
}
tool-tip.theme\:light {
  background-color: white;
  color: var(--font-colour, #666666);
  padding: var(--gutter1);
  box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.1);
}
.js-has-pseudo [csstools-has-38-33-33-30-19-38-2x-34-1m-2w-2p-37-14-2x-2u-36-2p-31-2t-15]:not(does-not-exist):not(does-not-exist) {
  padding: 0 !important;
  overflow: initial;
  max-width: calc(100vw - var(--gutter4)) !important;
}
tool-tip:has(iframe) {
  padding: 0 !important;
  overflow: initial;
  max-width: calc(100vw - var(--gutter4)) !important;
}
.js-has-pseudo [csstools-has-38-33-33-30-19-38-2x-34-1m-2w-2p-37-14-2x-2u-36-2p-31-2t-15-w-1q-w-1a-2q-39-38-38-33-32]:not(does-not-exist):not(does-not-exist) {
  position: absolute;
  top: calc(0px - 0.9em);
  right: calc(0px - 0.9em);
  padding: 0.12em;
  aspect-ratio: 1;
}
tool-tip:has(iframe) > .button {
  position: absolute;
  top: calc(0px - 0.9em);
  right: calc(0px - 0.9em);
  padding: 0.12em;
  aspect-ratio: 1;
}
.js-has-pseudo [csstools-has-38-33-33-30-19-38-2x-34-1m-2w-2p-37-14-2x-2u-36-2p-31-2t-15-w-1q-w-1a-2q-39-38-38-33-32-w-37-3a-2v]:not(does-not-exist):not(does-not-exist):not(does-not-exist) {
  width: 1.8em;
  height: 1.8em;
}
tool-tip:has(iframe) > .button svg {
  width: 1.8em;
  height: 1.8em;
}
tool-tip iframe {
  display: block;
  width: 512px;
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: inherit;
  overflow: hidden;
  margin: 0;
}
@supports not (backdrop-filter: none) {
  tool-tip {
    background: initial;
    background-color: #5f5f5f;
  }
}
tool-tip {
  animation: tool-tip 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 normal forwards;
}
@keyframes tool-tip {
  to {
    opacity: 1;
    margin-top: var(--tool-tip-end-position-y, 0.5em);
    margin-left: var(--tool-tip-end-position-x, 0em);
  }
}
tool-tip .button {
  color: inherit;
}
tool-tip.is\:wide {
  left: var(--gutter0);
  width: 100%;
  max-width: calc(100% - var(--gutter1));
}
tool-tip.is\:tall {
  height: 100vh;
  max-height: calc(100vh - var(--gutter1));
}
tool-tip.size\:small {
  padding: calc(var(--gap) * 0.5 - 0.2em) calc(var(--gap) * 0.5);
  font-size: 0.7em;
}
tool-tip.position\:above {
  --tool-tip-end-position-y: -0.5em ;
}
tool-tip.position\:right {
  --tool-tip-start-position-y: 0em;
  --tool-tip-end-position-y: 0em;
  --tool-tip-end-position-x: 0.5em;
}
tool-tip.position\:left {
  --tool-tip-start-position-y: 0em;
  --tool-tip-end-position-y: 0em;
  --tool-tip-end-position-x: -0.5em;
}
tool-tip.position\:center {
  --tool-tip-start-position-y: 0em;
  --tool-tip-end-position-y: 0em;
  pointer-events: none;
}
/*# sourceMappingURL=../sourcemaps/components/tool-tip.css.map */