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

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

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}



table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --tz4-color-primary-hsl: 250, 84%, 54%;
  --tz4-color-bg-hsl: 0, 0%, 100%;
  --tz4-color-contrast-high-hsl: 230, 7%, 23%;
  --tz4-color-contrast-higher-hsl: 230, 13%, 9%;

  /* spacing */
  --tz4-space-3xs: 0.25rem;
  --tz4-space-2xs: 0.375rem;
  --tz4-space-xs: 0.5rem;
  --tz4-space-sm: 0.75rem;

  /* typography */
  --tz4-text-sm: 0.833rem;
  --tz4-text-xs: 0.694rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --tz4-space-3xs: 0.375rem;
    --tz4-space-2xs: 0.5625rem;
    --tz4-space-xs: 0.75rem;
    --tz4-space-sm: 1.125rem;

    /* typography */
    --tz4-text-sm: 1rem;
    --tz4-text-xs: 0.8rem;
  }
}

/* component */
:root {
  --tooltip-triangle-size: 12px;
}

.tooltip-trigger {
  /* style inline-text tooltip trigger */
  white-space: nowrap;
  border-bottom: 1px dotted hsl(var(--tz4-color-contrast-high-hsl));
  cursor: help;
}

.tooltip {
  /* tooltip element - created using js */
  position: absolute;
  z-index: 5;
  display: inline-block;
  padding: var(--tz4-space-2xs) var(--tz4-space-xs);
  border-radius: 0.25em;
  max-width: 200px;
  background-color: hsla(var(--tz4-color-contrast-higher-hsl), 0.98);
  box-shadow: 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);
  color: hsl(var(--tz4-color-bg-hsl));
  font-size: var(--tz4-text-sm);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 0.2s, visibility 0.2s;
}
.tooltip a {
  color: inherit;
  text-decoration: underline;
}
@supports ((-webkit-clip-path: inset(50%)) or (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);
    -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
            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(--tz4-text-xs);
  padding: var(--tz4-space-3xs) var(--tz4-space-2xs);
}

.tooltip--md {
  max-width: 300px;
  padding: var(--tz4-space-xs) var(--tz4-space-sm);
}

.tooltip--lg {
  max-width: 350px;
  font-size: var(--tz4-text-base-size);
  padding: var(--tz4-space-xs) var(--tz4-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);
  -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
          transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
}

.tooltip--bottom::before {
  top: calc(var(--tooltip-triangle-size) * -0.5);
  -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(135deg);
          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);
  -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
          transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
}

.tooltip--right::before {
  left: calc(var(--tooltip-triangle-size) * -0.5);
  -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(45deg);
          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;
}