.g-with-explanation {
    @gap: 6px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    &.with-icon-left {
        flex-flow: row-reverse nowrap;

        .icon-container {
            margin-left: 0;
            margin-right: @gap;
        }
    }

    .icon-container {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 1em;
        margin-left: @gap;
        color: inherit;
        cursor: help;

        svg {
            width: auto;
            height: 1.4em;

            path {
                fill: currentcolor;
            }

            circle {
                fill: none;
                stroke: currentcolor;
            }
        }
    }
}

.g-with-explanation-tooltip {
    max-width: 500px;
}