:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:host { --arrow-color: black; --arrow-size: var(--wa-tooltip-arrow-size); --popup-border-width: 0px; --show-duration: 100ms; --hide-duration: 100ms; --arrow-base-offset: var(--popup-border-width); --arrow-size-diagonal: calc((var(--arrow-size) + var(--arrow-base-offset)) * 0.7071); --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size)); --arrow-size-div: calc(var(--arrow-size-diagonal) * 2); --arrow-clipping-corner: calc(var(--arrow-base-offset) * 1.4142); display: contents; }
.popup {
  position: absolute; isolation: isolate; max-width: var(--auto-size-available-width, none); max-height: var(--auto-size-available-height, none);
  :where(&) { inset: unset; padding: unset; margin: unset; width: unset; height: unset; color: unset; background: unset; border: unset; overflow: unset; }
}
.popup-fixed { position: fixed; }
.popup:not(.popup-active) { display: none; }
.arrow { position: absolute; width: var(--arrow-size-div); height: var(--arrow-size-div); background: var(--arrow-color); z-index: 3; clip-path: polygon(
      var(--arrow-clipping-corner) 100%,
      var(--arrow-base-offset) calc(100% - var(--arrow-base-offset)),
      calc(var(--arrow-base-offset) - 2px) calc(100% - var(--arrow-base-offset)),
      calc(100% - var(--arrow-base-offset)) calc(var(--arrow-base-offset) - 2px),
      calc(100% - var(--arrow-base-offset)) var(--arrow-base-offset),
      100% var(--arrow-clipping-corner),
      100% 100%
    ); rotate: 45deg; }
:host([data-current-placement|="left"]) .arrow { rotate: -45deg; }
:host([data-current-placement|="right"]) .arrow { rotate: 135deg; }
:host([data-current-placement|="bottom"]) .arrow { rotate: 225deg; }
.popup-hover-bridge:not(.popup-hover-bridge-visible) { display: none; }
.popup-hover-bridge { position: fixed; z-index: 899; inset: 0px; clip-path: polygon(
      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
    ); }
.show { animation: show var(--show-duration) ease; }
.hide { animation: show var(--hide-duration) ease reverse; }
@keyframes show { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.show-with-scale { animation: show-with-scale var(--show-duration) ease; }
.hide-with-scale { animation: show-with-scale var(--hide-duration) ease reverse; }
@keyframes show-with-scale { 
  0% { opacity: 0; scale: 0.8; }
  100% { opacity: 1; scale: 1; }
}