.tooltip-anchor {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.tooltip-icon-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fcs-tooltip {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    max-width: var(--fcs-tooltip-max-width, 400px);
    background-color: #363636;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 9999;
    white-space: normal;
    line-height: 1.4;
}

.tooltip-icon-anchor:hover .fcs-tooltip,
.tooltip-anchor:hover .fcs-tooltip {
    display: block;
}

.fcs-tooltip-right {
    left: calc(100% + 10px);
}

.fcs-tooltip-left {
    right: calc(100% + 10px);
}

.fcs-tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent #363636 transparent transparent;
}

.fcs-tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #363636;
}

.tooltip-anchor:hover .fcs-tooltip {
    display: block;
}