.oni-icon-wrapper,
.oni-icon-wrap,
.oni-icon-mask {
animation: none !important;
-webkit-animation: none !important; will-change: auto;
}
.oni-icon-wrapper {
display: block;
line-height: 0;
padding: 4px 0; isolation: isolate;
transform: translateZ(0);
}
.oni-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
transform: translateZ(0);
} .oni-icon-mask {
display: inline-block;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
vertical-align: middle;
flex-shrink: 0;
transform: translateZ(0);
} .oni-icon-mask.oni-anim-fly    { animation: oni-fly    1.6s ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-spin   { animation: oni-spin   1.2s linear      infinite !important; }
.oni-icon-mask.oni-anim-swing  { animation: oni-swing  1s   ease-in-out infinite !important; transform-origin: top center; }
.oni-icon-mask.oni-anim-pulse  { animation: oni-pulse  1.4s ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-float  { animation: oni-float  2s   ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-bounce { animation: oni-bounce 1s   ease        infinite !important; }
.oni-icon-mask.oni-anim-blink  { animation: oni-blink  1.2s ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-shake  { animation: oni-shake  0.5s ease-in-out infinite !important; } @keyframes oni-fly    { 0%,100%{transform:translateX(0)}   50%{transform:translateX(10px)} }
@keyframes oni-spin   { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes oni-swing  { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(14deg)} }
@keyframes oni-pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }
@keyframes oni-float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes oni-bounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-14px)} 60%{transform:translateY(-7px)} }
@keyframes oni-blink  { 0%,100%{opacity:1} 50%{opacity:0.1} }
@keyframes oni-shake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } .oni-tooltip {
position: absolute;
padding: 6px 12px;
border-radius: 6px;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 3px 10px rgba(0,0,0,.35);
z-index: 100;
line-height: 1.5;
text-align: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); white-space: nowrap;
} .oni-tooltip.has-width {
white-space: normal;
} .oni-tooltip::after {
content: '';
position: absolute;
border: 6px solid transparent;
} .oni-tooltip--top {
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(6px);
}
.oni-tooltip--top::after {
top: 100%; left: 50%; transform: translateX(-50%);
border-top-color: var(--oni-tt-bg, #0D1A26);
}
.oni-tooltip--bottom {
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
}
.oni-tooltip--bottom::after {
bottom: 100%; left: 50%; transform: translateX(-50%);
border-bottom-color: var(--oni-tt-bg, #0D1A26);
}
.oni-tooltip--left {
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(6px);
}
.oni-tooltip--left::after {
left: 100%; top: 50%; transform: translateY(-50%);
border-left-color: var(--oni-tt-bg, #0D1A26);
}
.oni-tooltip--right {
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(-6px);
}
.oni-tooltip--right::after {
right: 100%; top: 50%; transform: translateY(-50%);
border-right-color: var(--oni-tt-bg, #0D1A26);
} .oni-icon-wrap:hover .oni-tooltip--top    { opacity:1; transform: translateX(-50%) translateY(0); }
.oni-icon-wrap:hover .oni-tooltip--bottom { opacity:1; transform: translateX(-50%) translateY(0); }
.oni-icon-wrap:hover .oni-tooltip--left   { opacity:1; transform: translateY(-50%) translateX(0); }
.oni-icon-wrap:hover .oni-tooltip--right  { opacity:1; transform: translateY(-50%) translateX(0); }