/** 
 * Widget Tooltips
 *
 * W/O specifying placement the default is TOP alignment.
 *
 * Best practice is to place the tooltip on an element that conforms to the text
 * dimensions. e.g. SPAN.
 *
 * <span class="tooltip top" aria-label="Lorem ipsum dolor sit amet">consectetur adipiscing elit</span>
 *
 * This has been tested in a flex layout in a specific application. Expect weirdness if porting elsewhere.
 */
@import "widget-root.css";

*.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip::before {
  position: absolute;
  background: var(--tooltip-bg-color);
  border-width: 3px;
  border-style: solid;
  content: " ";
  width: 16px;
  height: 16px;
  z-index: 999;
  display: none;
  box-sizing: border-box;
}
.tooltip::after {
  position: absolute;
  background: var(--tooltip-bg-color);
  border: 3px solid var(--tooltip-border-color);
  border-radius: 5px;
  padding: var(--tooltip-padding);
  text-align: center;
  z-index: 998;
  display: none;
  box-sizing: border-box;
}
.tooltip:hover::before {
  display: block;
}
.tooltip:hover::after {
  content: attr(aria-label);
  color: var(--tooltip-text-color) !important;
  font-size: calc(0.75rem + 12.5 * var(--window-ratio)) !important;
  line-height: calc(1.0rem + 12.5 * var(--window-ratio)) !important;
  font-weight: normal !important;
  width: 32vw;
  height: max-content;
  display: inline-block;
  white-space: normal !important;
  word-break: unset !important;
  overflow-wrap: unset !important;
  hyphens: unset !important;
}


.tooltip::before,
.tooltip.top::before {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
  border-color: transparent var(--tooltip-border-color) var(--tooltip-border-color) transparent;
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 100% 0%);
}
.tooltip::after,
.tooltip.top::after {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 10px));
}
.tooltip.bottom::before {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 5px) rotate(45deg);
  border-color: var(--tooltip-border-color) transparent transparent var(--tooltip-border-color);
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%);
}
.tooltip.bottom::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
}
.tooltip.right::before {
  top: 50%;
  left: 100%;
  transform: translate(5px,-50%) rotate(45deg);
  border-color: transparent transparent var(--tooltip-border-color) var(--tooltip-border-color);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 0% 0%);
}
.tooltip.right::after {
  bottom: calc(0% - (var(--tooltip-padding) / 2));
  left: 100%;
  transform: translate(10px, var(--tooltip-vert-shift));
}
.tooltip.left::before {
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
  border-color: var(--tooltip-border-color) var(--tooltip-border-color) transparent transparent;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
}
.tooltip.left::after {
  top: 0;
  left: 0;
  transform: translate(calc(-100% - 10px), var(--tooltip-vert-shift));
}

@media only screen and (max-width: 349px) {
  /*
  .tooltip:hover::after,
  .tooltip:hover::before {
    display: none !important;
  }
  */
  .tooltip:hover::after {
    width: 55vw;
  }
}