@volverjs/style/dist/components/vv-tooltip.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-tooltip-opacity: var(--opacity-0);--vv-tooltip-display: block;--vv-tooltip-position: absolute;--vv-tooltip-inset-inline: 100% auto;--vv-tooltip-top: 50%;--vv-tooltip-translate: var(--spacing-10) -50%;--vv-tooltip-z-index: var(--z-tooltip);--vv-tooltip-inline-size: max-content;--vv-tooltip-max-inline-size: 25ch;--vv-tooltip-border-radius: var(--rounded-md);--vv-tooltip-padding: var(--spacing-4) var(--spacing-sm);--vv-tooltip-background: var(--color-gray-darken-4);--vv-tooltip-font-size: var(--text-12);--vv-tooltip-font-weight: var(--font-normal);--vv-tooltip-color: var(--color-gray-lighten-5);--vv-tooltip-text-align: center;--vv-tooltip-box-shadow: var(--shadow-md);--vv-tooltip-will-change: opacity;--vv-tooltip-transition: var(--transition-opacity);--vv-tooltip-pseudo-after-position: absolute;--vv-tooltip-pseudo-after-z-index: -1;--vv-tooltip-pseudo-after-inset-inline: 0 auto;--vv-tooltip-pseudo-after-inset-block: 50% auto;--vv-tooltip-pseudo-after-translate: -100% -50%;--vv-tooltip-pseudo-after-border-width: var(--spacing-8);--vv-tooltip-pseudo-after-border-style: solid;--vv-tooltip-pseudo-after-border-color: transparent var(--color-gray-darken-4) transparent transparent;--vv-tooltip-modifier-visible-opacity: var(--opacity-100);--vv-tooltip-modifier-top-inset-inline: 50% 0;--vv-tooltip-modifier-top-inset-block: auto 100%;--vv-tooltip-modifier-top-translate: -50% calc(var(--spacing-10) * -1);--vv-tooltip-modifier-top-pseudo-after-inset-inline: 50% auto;--vv-tooltip-modifier-top-pseudo-after-inset-block: 100% auto;--vv-tooltip-modifier-top-pseudo-after-translate: -50%;--vv-tooltip-modifier-top-pseudo-after-rotate: -90deg;--vv-tooltip-modifier-bottom-inset-inline: 50% 0;--vv-tooltip-modifier-bottom-inset-block: 100% auto;--vv-tooltip-modifier-bottom-translate: -50% var(--spacing-10);--vv-tooltip-modifier-bottom-pseudo-after-inset-inline: 50% auto;--vv-tooltip-modifier-bottom-pseudo-after-inset-block: 0 auto;--vv-tooltip-modifier-bottom-pseudo-after-translate: -50% -100%;--vv-tooltip-modifier-bottom-pseudo-after-rotate: 90deg;--vv-tooltip-modifier-left-inset-inline: auto 100%;--vv-tooltip-modifier-left-translate: calc(var(--spacing-10) * -1) -50%;--vv-tooltip-modifier-left-pseudo-after-position: absolute;--vv-tooltip-modifier-left-pseudo-after-inset-inline: auto 0;--vv-tooltip-modifier-left-pseudo-after-translate: 100% -50%;--vv-tooltip-modifier-left-pseudo-after-rotate: 180deg}:where(.vv-tooltip){opacity:var(--vv-tooltip-opacity);display:var(--vv-tooltip-display);position:var(--vv-tooltip-position);inset-inline:var(--vv-tooltip-inset-inline);top:var(--vv-tooltip-top);translate:var(--vv-tooltip-translate);z-index:var(--vv-tooltip-z-index);inline-size:var(--vv-tooltip-inline-size);max-inline-size:var(--vv-tooltip-max-inline-size);border-radius:var(--vv-tooltip-border-radius);padding:var(--vv-tooltip-padding);background:var(--vv-tooltip-background);font-size:var(--vv-tooltip-font-size);font-weight:var(--vv-tooltip-font-weight);color:var(--vv-tooltip-color);text-align:var(--vv-tooltip-text-align);box-shadow:var(--vv-tooltip-box-shadow);will-change:var(--vv-tooltip-will-change);transition:var(--vv-tooltip-transition)}:where(.vv-tooltip):after{content:"";position:var(--vv-tooltip-pseudo-after-position);z-index:var(--vv-tooltip-pseudo-after-z-index);inset-inline:var(--vv-tooltip-pseudo-after-inset-inline);inset-block:var(--vv-tooltip-pseudo-after-inset-block);translate:var(--vv-tooltip-pseudo-after-translate);border-width:var(--vv-tooltip-pseudo-after-border-width);border-style:var(--vv-tooltip-pseudo-after-border-style);border-color:var(--vv-tooltip-pseudo-after-border-color)}:where(*:has(>.vv-tooltip)):hover,:where(*:has(>.vv-tooltip)):focus-visible,:where(*:has(>.vv-tooltip)).hover,:where(*:has(>.vv-tooltip)).focus-visible,:where(.vv-tooltip--visible.vv-tooltip){--vv-tooltip-opacity: var(--vv-tooltip-modifier-visible-opacity)}:where(.vv-tooltip--top.vv-tooltip){--vv-tooltip-inset-inline: var(--vv-tooltip-modifier-top-inset-inline);inset-block:var(--vv-tooltip-modifier-top-inset-block);--vv-tooltip-translate: var(--vv-tooltip-modifier-top-translate)}:where(.vv-tooltip--top.vv-tooltip):after{--vv-tooltip-pseudo-after-inset-inline: var(--vv-tooltip-modifier-top-pseudo-after-inset-inline);--vv-tooltip-pseudo-after-inset-block: var(--vv-tooltip-modifier-top-pseudo-after-inset-block);--vv-tooltip-pseudo-after-translate: var(--vv-tooltip-modifier-top-pseudo-after-translate);rotate:var(--vv-tooltip-modifier-top-pseudo-after-rotate)}:where(.vv-tooltip--bottom.vv-tooltip){--vv-tooltip-inset-inline: var(--vv-tooltip-modifier-bottom-inset-inline);inset-block:var(--vv-tooltip-modifier-bottom-inset-block);--vv-tooltip-translate: var(--vv-tooltip-modifier-bottom-translate)}:where(.vv-tooltip--bottom.vv-tooltip):after{--vv-tooltip-pseudo-after-inset-inline: var(--vv-tooltip-modifier-bottom-pseudo-after-inset-inline);--vv-tooltip-pseudo-after-inset-block: var(--vv-tooltip-modifier-bottom-pseudo-after-inset-block);--vv-tooltip-pseudo-after-translate: var(--vv-tooltip-modifier-bottom-pseudo-after-translate);rotate:var(--vv-tooltip-modifier-bottom-pseudo-after-rotate)}:where(.vv-tooltip--left.vv-tooltip){--vv-tooltip-inset-inline: var(--vv-tooltip-modifier-left-inset-inline);--vv-tooltip-translate: var(--vv-tooltip-modifier-left-translate)}:where(.vv-tooltip--left.vv-tooltip):after{--vv-tooltip-pseudo-after-position: var(--vv-tooltip-modifier-left-pseudo-after-position);--vv-tooltip-pseudo-after-inset-inline: var(--vv-tooltip-modifier-left-pseudo-after-inset-inline);--vv-tooltip-pseudo-after-translate: var(--vv-tooltip-modifier-left-pseudo-after-translate);rotate:var(--vv-tooltip-modifier-left-pseudo-after-rotate)}:where(*:has(>.vv-tooltip)){position:relative}