.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);
}

/* Arrow */
.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);
}

/* This allows users to move their cursor from the button to the tooltip */
.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;
}