.g44-tooltip-container {
display:flex;
align-items: flex-start;
margin-top:1em;
gap: 10px;
margin-bottom:1em;
}
.g44-tip-content {
flex-grow: 0;
}
.g44-tooltip-container.stretch .g44-tip-content{
flex-grow: 1;
}
.g44-tip-content>*:first-child {
margin-top: 0.25em;
}
.g44-tooltip-container .g44-tooltip [data-tooltip-trigger]{
margin:0px;
font-size:1.6em;
line-height: 0;
}
.g44-tooltip {
position: relative;
display: inline-block;
}
.block-editor .g44-tooltip [data-tooltip-trigger] i{
pointer-events:none;
}
.g44-tooltip [data-tooltip-trigger] {
font-size: inherit;
display: inline-block;
border: 0px;
padding: 0px;
margin:0px 5px;
cursor: help;
background-color: transparent;
color:var(--g44-black-color);
min-height:30px;
min-width: 30px;
line-height:30px;
border-radius: 100px;
outline-offset:4px;
}
.g44-tooltip [data-tooltip-trigger]:focus-visible i {
animation-play-state: paused !important;
transform:none !important;
}
.g44-tooltip:hover [data-tooltip-trigger] {
color:var(--g44-primary-color);
}
.g44-dark .g44-tooltip [data-tooltip-trigger],
.g44-dark [data-tooltip-trigger]{
color:var(--g44-secondary-color-dark);
}
.g44-dark .g44-tooltip:hover [data-tooltip-trigger],
.g44-dark [data-tooltip-trigger]:hover{
color:var(--g44-primary-color-dark);
} .g44-tooltip::before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: var(--g44-lightgray-color);
z-index: 100;
}
.g44-tooltip.g44-dark::before{
border-bottom-color: var(--g44-black-color);
} .g44-tooltip::after {
position: absolute;
right: -20%;
top: 100%;
left: -20%;
display: block;
height: 20px;
}
.g44-tooltip.tooltip-visible::before,
.g44-tooltip.tooltip-visible::after {
content: '';
}
.g44-tooltip [role="tooltip"] {
position: absolute;
z-index: 99;
top: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
max-width: clamp(15rem, 35.714vw + 7.857rem, 40rem);
width: max-content;
margin: 0;
padding: 1em;
border-radius: 1em;
color: var(--g44-black-color);
background-color: var(--g44-lightgray-color);
font-family:var(--g44-font-family-body);
font-size: 0.9rem;
line-height: 1rem;
font-weight: normal;
box-shadow: 0px 0px 30px rgb(139 139 139 / 50%);
}
.g44-tooltip.g44-dark [role="tooltip"] {
color: var(--g44-lightgray-color);
background-color: var(--g44-black-color);
box-shadow:none;
}
.g44-tooltip [role="tooltip"] :is(a,a:hover){
color: var(--g44-black-color);
}
.g44-tooltip.g44-dark [role="tooltip"] :is(a,a:hover){
color: var(--g44-primary-color-dark);
}
.g44-tooltip.top::before,
.g44-tooltip.top::after,
.g44-tooltip.top [role="tooltip"] {
top: unset;
bottom: 100%;
}
.g44-tooltip.top::before {
border-top-color: var(--g44-lightgray-color);
border-bottom-color: transparent;
}
.g44-tooltip.g44-dark.top::before {
border-top-color: var(--g44-black-color);
}
.g44-tooltip.top [role="tooltip"] {
bottom: calc(100% + 16px);
}
[role="tooltip"]>* {
padding: 0px;
margin: 0px;
}
.g44-tooltip [aria-hidden="true"] {
pointer-events: none;
}
.g44-tooltip .hidden {
display: none;
}