/* -------------------------------- 

File#: _1_tooltip
Title: Tooltip
Descr: A popup displaying additional text information
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --tooltip-triangle-size: 12px;
  --color-contrast-high: var(--gray1);
  --color-contrast-higher: var(--gray1);
  --space-xxs: 9px;
  --space-xs: 12px;
  --radius-md: 0.25em;
  --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}
.tooltip-trigger {
  /* style inline-text tooltip trigger */
  white-space: nowrap;
  display: inline-block;
}
.tooltip {
  /* tooltip element - created using js */
  position: absolute;
  z-index: var(--z-index-popover, 5);
  display: inline-block;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-md);
  max-width: 200px;
  background-color: rgba(var(--rgb_gray1), 0.98);
  box-shadow: var(--shadow-md);
  color: var(--white);
  transition: opacity 0.2s, visibility 0.2s;
}
.tooltip a {
  color: inherit;
  text-decoration: underline;
}
@supports (clip-path: inset(50%)) {
  .tooltip::before {
    /* tooltip triangle  */
    content: "";
    position: absolute;
    background-color: inherit;
    border: inherit;
    width: var(--tooltip-triangle-size);
    height: var(--tooltip-triangle-size);
    clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
  }
}
.tootip:not(.tooltip--sticky) {
  pointer-events: none;
}
/* size variations */
.tooltip--sm {
  max-width: 150px;
  font-size: var(--text-xs);
  padding: var(--space-xxxs) var(--space-xxs);
}
.tooltip--md {
  max-width: 300px;
  padding: var(--space-xs) var(--space-sm);
}
.tooltip--lg {
  max-width: 350px;
  font-size: var(--text-base-size);
  padding: var(--space-xs) var(--space-sm);
}
/* tooltip position */
.tooltip {
  /* variable used in JS to proper place tooltip triangle */
  --tooltip-triangle-translate: 0px;
}
.tooltip--top::before, .tooltip--bottom::before {
  left: calc(50% - var(--tooltip-triangle-size) / 2);
}
.tooltip--top::before {
  bottom: calc(var(--tooltip-triangle-size) * -0.5);
  transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
}
.tooltip--bottom::before {
  top: calc(var(--tooltip-triangle-size) * -0.5);
  transform: translateX(var(--tooltip-triangle-translate)) rotate(135deg);
}
.tooltip--left::before, .tooltip--right::before {
  top: calc(50% - var(--tooltip-triangle-size) / 2);
}
.tooltip--left::before {
  right: calc(var(--tooltip-triangle-size) * -0.5);
  transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
}
.tooltip--right::before {
  left: calc(var(--tooltip-triangle-size) * -0.5);
  transform: translateX(var(--tooltip-triangle-translate)) rotate(45deg);
}
.tooltip--is-hidden {
  /* class used in JS to hide the tooltip element before its top/left positions are set */
  visibility: hidden;
  opacity: 0;
}
/*# sourceMappingURL=https://fsm.kniff.at/wp-content/build/scss_library/4f6bf7b71fdf08310468a52d06a051511a91171a.css.map */