button.tool-tip-icon
{
    background-color: transparent;
    border: 0;
}

.tool-tip-icon
{
    --tool-tip-icon-size: 1.125rem;
    --tool-tip-icon-default: var(--disabledAreaColor);
    --tool-tip-icon-hover: var(--buildmatrixBlueHover);
    --tool-tip-icon-active: var(--buildmatrixBlueHover);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    margin: -0.375rem;
}

    /* Blue aura */
    .tool-tip-icon::before
    {
        content: "";
        position: absolute;
        inset: -1px;
        background: var(--tool-tip-icon-aura);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.65);
        transition: opacity 150ms ease, transform 150ms ease;
    }

.tool-tip-icon__svg
{
    position: relative;
    z-index: 1;
    display: block;
    width: var(--tool-tip-icon-size);
    height: var(--tool-tip-icon-size);
    overflow: visible;
}

.tool-tip-icon__background
{
    fill: var(--tool-tip-icon-default);
    transition: fill 150ms ease;
}

.tool-tip-icon__line
{
    stroke: #fff;
}

.tool-tip-icon__dot
{
    fill: #fff;
}

/*
 * Hover state and persistent clicked state.
 *
 * A clicked button retains focus while the click-triggered tooltip
 * is open. Clicking elsewhere closes the tooltip and removes focus.
 */
.tool-tip-icon:hover::before,
.tool-tip-icon.tool-tip-icon-active::before
{
    opacity: 1;
    transform: scale(1);
}

.tool-tip-icon:hover .tool-tip-icon__background
{
    fill: var(--tool-tip-icon-hover);
}

.tool-tip-icon.tool-tip-icon-active .tool-tip-icon__background
{
    fill: var(--tool-tip-icon-active);
}

/* Accessible keyboard focus indication */
.tool-tip-icon:focus-visible
{
    outline: 2px solid var(--tool-tip-icon-active);
    outline-offset: 2px;
}

.tool-tip-popup
{
    position: fixed;
    z-index: 10000;
    width: max-content;
    max-width: 22rem;
    border: 1px solid #13B5EA;
    border-radius: 0.625rem;
    padding: 0.5625rem 0.875rem 0.875rem 0.875rem;
    background: #073763;
    visibility: hidden;
}

    .tool-tip-popup.tool-tip-popup-positioned
    {
        visibility: visible;
    }

/* Top / Bottom arrows move horizontally */
.tool-tip-popup-top::before,
.tool-tip-popup-top::after,
.tool-tip-popup-bottom::before,
.tool-tip-popup-bottom::after
{
    content: "";
    position: absolute;
    left: var(--tooltip-arrow-offset, 50%);
    width: 0;
    height: 0;
    transform: translateX(-50%);
}

/* Left / Right arrows move vertically */
.tool-tip-popup-left::before,
.tool-tip-popup-left::after,
.tool-tip-popup-right::before,
.tool-tip-popup-right::after
{
    content: "";
    position: absolute;
    top: var(--tooltip-arrow-offset, 50%);
    width: 0;
    height: 0;
    transform: translateY(-50%);
}


/* TOP */

.tool-tip-popup-top
{
    transform: translateY(-0.3125rem);
}

.tool-tip-popup-top::before
{
    bottom: -17px;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid #13B5EA;
}

.tool-tip-popup-top::after
{
    bottom: -15px;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-top: 19px solid #073763;
}


/* BOTTOM */

.tool-tip-popup-bottom
{
    transform: translateY(0.3125rem);
}

.tool-tip-popup-bottom::before
{
    top: -17px;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 17px solid #13B5EA;
}

.tool-tip-popup-bottom::after
{
    top: -15px;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 19px solid #073763;
}


/* LEFT */

.tool-tip-popup-left
{
    transform: translateX(-0.3125rem);
}

.tool-tip-popup-left::before
{
    right: -17px;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #13B5EA;
}

.tool-tip-popup-left::after
{
    right: -15px;
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
    border-left: 19px solid #073763;
}


/* RIGHT */

.tool-tip-popup-right
{
    transform: translateX(0.3125rem);
}

.tool-tip-popup-right::before
{
    left: -17px;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 17px solid #13B5EA;
}

.tool-tip-popup-right::after
{
    left: -15px;
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
    border-right: 19px solid #073763;
}

@media (min-resolution: 1.5dppx)
{
    .tool-tip-popup-left::after
    {
        right: -16px;
    }

    .tool-tip-popup-right::after
    {
        left: -16px;
    }

    .tool-tip-popup-top::after
    {
        bottom: -16px;
    }

    .tool-tip-popup-bottom::after
    {
        top: -16px;
    }
}

.tool-tip
{
    font-size: 0.625rem;
    color: white;
}

    .tool-tip .tool-tip-popup h4
    {
        color: #13B5EA !important;
        font-size: 0.75rem;
        line-height: 20px;
        margin: 0 !important;
    }

    .tool-tip .tool-tip-popup p
    {
        line-height: 1.5 !important;
        margin-bottom: 0.625rem !important;
    }

        .tool-tip .tool-tip-popup p:last-child
        {
            margin-bottom: 0 !important;
        }

    .tool-tip .tool-tip-popup strong
    {
        font-weight: 500 !important;
    }