[class*="hint--"] {
position: relative;
display: inline-block;
}
[data-hint]::after,
[data-hint]::before,
[aria-label][class*="hint--"]::after,
[aria-label][class*="hint--"]::before {
position: absolute;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition:
opacity 0.25s ease,
transform 0.25s ease,
visibility 0.25s;
z-index: 999999;
}
[data-hint]:hover::after,
[data-hint]:hover::before,
[data-hint]:focus::after,
[data-hint]:focus::before,
[aria-label][class*="hint--"]:hover::after,
[aria-label][class*="hint--"]:hover::before,
[aria-label][class*="hint--"]:focus::after,
[aria-label][class*="hint--"]:focus::before {
visibility: visible;
opacity: 1;
}
[data-hint]::after,
[aria-label][class*="hint--"]::after {
content: attr(data-hint);
background: #2d2d2d;
color: #fff;
padding: 10px 14px;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
max-width: 280px;
word-wrap: break-word;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
[aria-label][class*="hint--"]::after {
content: attr(aria-label);
font-family: var(--font_body-font-family); }
[data-hint=""]::after,
[data-hint=""]::before,
[aria-label=""]::after,
[aria-label=""]::before {
display: none !important;
} .hint--error::after    { background: #e74c3c; }
.hint--info::after     { background: #3498db; }
.hint--warning::after  { background: #f39c12; }
.hint--success::after  { background: #27ae60; } .hint--error.hint--top::before,
.hint--error.hint--top-left::before,
.hint--error.hint--top-right::before    { border-top-color: #e74c3c; }
.hint--error.hint--bottom::before,
.hint--error.hint--bottom-left::before,
.hint--error.hint--bottom-right::before { border-bottom-color: #e74c3c; }
.hint--error.hint--left::before         { border-left-color: #e74c3c; }
.hint--error.hint--right::before        { border-right-color: #e74c3c; } .hint--info.hint--top::before,
.hint--info.hint--top-left::before,
.hint--info.hint--top-right::before    { border-top-color: #3498db; }
.hint--info.hint--bottom::before,
.hint--info.hint--bottom-left::before,
.hint--info.hint--bottom-right::before { border-bottom-color: #3498db; }
.hint--info.hint--left::before         { border-left-color: #3498db; }
.hint--info.hint--right::before        { border-right-color: #3498db; } .hint--warning.hint--top::before,
.hint--warning.hint--top-left::before,
.hint--warning.hint--top-right::before    { border-top-color: #f39c12; }
.hint--warning.hint--bottom::before,
.hint--warning.hint--bottom-left::before,
.hint--warning.hint--bottom-right::before { border-bottom-color: #f39c12; }
.hint--warning.hint--left::before         { border-left-color: #f39c12; }
.hint--warning.hint--right::before        { border-right-color: #f39c12; } .hint--success.hint--top::before,
.hint--success.hint--top-left::before,
.hint--success.hint--top-right::before    { border-top-color: #27ae60; }
.hint--success.hint--bottom::before,
.hint--success.hint--bottom-left::before,
.hint--success.hint--bottom-right::before { border-bottom-color: #27ae60; }
.hint--success.hint--left::before         { border-left-color: #27ae60; }
.hint--success.hint--right::before        { border-right-color: #27ae60; } .hint--top::before,
.hint--top::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.hint--top::before { margin-bottom: -12px; }
.hint--top:hover::before,
.hint--top:focus::before { transform: translateX(-50%) translateY(-8px); }
.hint--top:hover::after,
.hint--top:focus::after   { transform: translateX(-50%) translateY(-8px); }
.hint--bottom::before,
.hint--bottom::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.hint--bottom::before { margin-top: -12px; }
.hint--bottom:hover::before,
.hint--bottom:focus::before { transform: translateX(-50%) translateY(8px); }
.hint--bottom:hover::after,
.hint--bottom:focus::after   { transform: translateX(-50%) translateY(8px); }
.hint--left::before,
.hint--left::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
}
.hint--left::before { margin-right: -12px; }
.hint--left:hover::before,
.hint--left:focus::before { transform: translateY(-50%) translateX(-8px); }
.hint--left:hover::after,
.hint--left:focus::after   { transform: translateY(-50%) translateX(-8px); margin-right: 8px; }
.hint--right::before,
.hint--right::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
}
.hint--right::before { margin-left: -12px; }
.hint--right:hover::before,
.hint--right:focus::before { transform: translateY(-50%) translateX(8px); }
.hint--right:hover::after,
.hint--right:focus::after   { transform: translateY(-50%) translateX(8px); margin-left: 8px; } .hint--top-left::before,
.hint--top-left::after {
bottom: 100%;
left: 0;
transform: translateY(0);
}
.hint--top-left::after { transform: translateY(-8px); }
.hint--top-left:hover::after,
.hint--top-left:hover::before {
transform: translateY(-12px);
}
.hint--top-right::before,
.hint--top-right::after {
bottom: 100%;
right: 0;
transform: translateY(0);
}
.hint--top-right::after { transform: translateY(-8px); }
.hint--top-right:hover::after,
.hint--top-right:hover::before {
transform: translateY(-8px);
} .hint--bottom-left::before,
.hint--bottom-left::after {
top: 100%;
left: 0;
transform: translateY(0);
}
.hint--bottom-left::after { transform: translateY(8px); }
.hint--bottom-left:hover::after,
.hint--bottom-left:hover::before {
transform: translateY(12px);
}
.hint--bottom-right::before,
.hint--bottom-right::after {
top: 100%;
right: 0;
transform: translateY(0);
}
.hint--bottom-right::after { transform: translateY(8px); }
.hint--bottom-right:hover::after,
.hint--bottom-right:hover::before {
transform: translateY(12px);
} :root[dir="rtl"] .hint--top-left::before,
:root[dir="rtl"] .hint--top-left::after,
:root[dir="rtl"] .hint--bottom-left::before,
:root[dir="rtl"] .hint--bottom-left::after {
left: auto;
right: 0;
}
:root[dir="rtl"] .hint--top-right::before,
:root[dir="rtl"] .hint--top-right::after,
:root[dir="rtl"] .hint--bottom-right::before,
:root[dir="rtl"] .hint--bottom-right::after {
right: auto;
left: 0;
} .hint--small::after  { width: 90px; }
.hint--medium::after { width: 180px; }
.hint--large::after  { width: 320px; }
.hint--small::after,
.hint--medium::after,
.hint--large::after { white-space: normal; }
.hint--rounded::after { border-radius: 12px; } .hint--no-animate::after,
.hint--no-animate::before { transition-duration: 0s !important; } .hint--bounce::after,
.hint--bounce::before {
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.71, 1.7, 0.77, 1.24);
} [aria-label][class*="hint--always"]::after {
opacity: 1;
visibility: visible;
}
@media (max-width:480px) {
[aria-label][class*="hint--"]::after{
display:none;
}
} @media (prefers-color-scheme: dark) {
[data-hint]::after,
[aria-label][class*="hint--"]::after {
background: rgba(30,30,30,0.95);
color: #eee;
border: 1px solid rgba(255,255,255,0.08);
}
}