@postnord/web-components/collection/components/feedback/pn-tooltip/pn-tooltip.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-tooltip {
  display: inline-block;
  font-size: 1em;
}

pn-tooltip .pn-tooltip {
  background: none;
  background-color: transparent;
  border: none;
  position: relative;
  padding: 0;
  border-radius: 50%;
  transition-property: outline-color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  cursor: pointer;
  font-size: inherit;
  outline: 0.2rem solid transparent;
  outline-offset: 0.2rem;
}
pn-tooltip .pn-tooltip:focus-visible {
  outline-color: #005d92;
  background-color: #e0f8ff;
}
pn-tooltip .pn-tooltip:hover {
  background-color: #e0f8ff;
}
pn-tooltip .pn-tooltip[data-light] pn-icon .pn-icon-svg path {
  fill: #ffffff;
}
pn-tooltip .pn-tooltip[data-light]:focus, pn-tooltip .pn-tooltip[data-light]:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
pn-tooltip .pn-tooltip[data-warning] {
  outline: 0.2rem solid transparent;
  outline-offset: 0.2rem;
}
pn-tooltip .pn-tooltip[data-warning] pn-icon .pn-icon-svg path {
  fill: #a70707;
}
pn-tooltip .pn-tooltip[data-warning]:focus-visible {
  outline-color: #a70707;
  background-color: #fdefee;
}
pn-tooltip .pn-tooltip[data-warning]:hover {
  background-color: #fdefee;
}
pn-tooltip .pn-tooltip-content {
  position: absolute;
  text-align: left;
  bottom: calc(100% + 0.75em);
  left: 50%;
  background: #ffffff;
  padding: 1em;
  border-radius: 0.8rem;
  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
  z-index: 1;
  max-width: min(95vw, 40em);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.15s;
  transform: scale(0) translateX(-50%);
  transform-origin: bottom left;
  width: max-content;
  color: #2d2013;
}
pn-tooltip .pn-tooltip-content[data-simple] {
  background: #0d234b;
  color: #ffffff;
  border-radius: 10em;
  padding: 0.5em 0.85em;
  bottom: 100%;
  font-size: 0.875em;
  font-weight: 300;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}
pn-tooltip .pn-tooltip > pn-icon {
  position: relative;
  pointer-events: none;
}
pn-tooltip .pn-tooltip > pn-icon:before {
  content: "";
  pointer-events: none;
  width: 0;
  height: 0;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-top: 0.75em solid #ffffff;
  filter: drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));
  bottom: 102%;
  left: 50%;
  position: absolute;
  z-index: 2;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0;
  transform: scale(0) translateX(-50%);
  transform-origin: top left;
}
pn-tooltip .pn-tooltip > pn-icon[data-simple]:before {
  content: none;
}
pn-tooltip .pn-tooltip[data-open] .pn-tooltip-content {
  transition-delay: 0;
}
pn-tooltip .pn-tooltip[data-open] pn-icon:before {
  transform: scale(1) translateX(-50%);
  transition-delay: 0.15s;
  pointer-events: auto;
}
pn-tooltip .pn-tooltip[data-downwards] .pn-tooltip-content {
  bottom: unset;
  top: calc(100% + 0.75em);
  transform-origin: top left;
}
pn-tooltip .pn-tooltip[data-downwards] pn-icon:before {
  top: 102%;
  transform-origin: bottom left;
  filter: drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));
  border-top: none;
  border-bottom: 0.75em solid #ffffff;
}