@primer/react-brand/esm/Tooltip/Tooltip.module-5Km7qGR5.css

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

.Primer_Brand__Tooltip-module__Tooltip___0Eipx{display:none}@media (forced-colors:active){.Primer_Brand__Tooltip-module__Tooltip___0Eipx{outline:var(--brand-borderWidth-thin) solid transparent}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover]{--offset:var(--base-size-8,--base-size-8);--b:1em;--h:.5em;--p:50%;--r:var(--brand-borderRadius-medium);--c:var(--brand-color-neutral-emphasisPlus);clip:auto;white-space:normal;width:max-content;font:normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);-webkit-font-smoothing:subpixel-antialiased;color:var(--brand-Tooltip-color-default);text-align:center;word-wrap:break-word;background:var(--c);border-radius:var(--r);opacity:0;border:0;max-width:250px;margin:auto;padding:.5em .75em;position:absolute;inset:auto;overflow:visible}:is(.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover]:popover-open,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover].Primer_Brand__Tooltip-module__\:popover-open___GpZlX){animation-name:Primer_Brand__Tooltip-module__tooltip-appear___hAyFD;animation-duration:.2s;animation-duration:var(--brand-animation-duration-faster,.2s);animation-timing-function:ease-in;animation-delay:0s;animation-fill-mode:forwards;display:block}.Primer_Brand__Tooltip-module__Tooltip___0Eipx:after{height:var(--offset);content:"";display:block;position:absolute;left:0;right:0}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;clip-path:polygon(0 100%, 0 0, 100% 0, 100% 100%, min(100%, var(--p) + var(--b) / 2) 100%, var(--p) calc(100% + var(--h)), max(0%, var(--p) - var(--b) / 2) 100%)}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;border-image:conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100%, var(--p) + var(--b) / 2) 0, var(--p) calc(-1 * var(--h)), max(0%, var(--p) - var(--b) / 2) 0)}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s]{-o-border-image:conic-gradient(var(--c) 0 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;border-image:conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;clip-path:polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% max(0%, var(--p) - var(--b) / 2), calc(100% + var(--h)) var(--p), 100% min(100%, var(--p) + var(--b) / 2))}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;border-image:conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);clip-path:polygon(0 100%, 100% 100%, 100% 0, 0 0, 0 max(0%, var(--p) - var(--b) / 2), calc(-1 * var(--h)) var(--p), 0 min(100%, var(--p) + var(--b) / 2))}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);border-image:conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h)}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n]:after{top:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s]:after{bottom:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]:after{height:100%;width:var(--offset);content:"";display:block;position:absolute;bottom:0;left:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]:after{height:100%;width:var(--offset);content:"";margin-left:calc(var(--offset) * -1px);display:block;position:absolute;bottom:0;right:100%}@keyframes Primer_Brand__Tooltip-module__tooltip-appear___hAyFD{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tooltip-module__Tooltip___0Eipx,.Primer_Brand__Tooltip-module__Tooltip___0Eipx:before,.Primer_Brand__Tooltip-module__Tooltip___0Eipx:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx *{animation-duration:0s!important}}