:root{
    --tooltip-size: 28px;
    --tooltip-icon-size: 20px;
    --tooltip-bg: #EEE;
    --tooltip-line-height: calc(var(--tooltip-size) - 4px);
}

[data-theme="dark"] {
    --tooltip-bg: #111;
}

.roux-tooltip-content
{
    display: none;
    flex-direction: column;
    opacity: 0;
    background: var(--tooltip-bg);
    box-shadow: var(--input-active-bs);
    position: fixed;
    color: var(--input-text);

    /* width: 200px; */
    height: fit-content;
    /* max-height: 200px; */
    overflow-y: auto;
    /* padding: 10px; */

    border-radius: 10px;

    transform: translateY(-10px);

    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s, opacity 0.4s, transform 0.4s ease-out;

    max-width: 360px;

    font-size: 14px;

    pointer-events: all;
}

.roux-tooltip-content.text-only
{
    border-radius: 15px;
    padding: 5px 10px;
}

.roux-tooltip-content.light-back
{
    background: var(--light-back);
}

.roux-tooltip-content.showing
{
    display: flex;
    opacity: 0;
}

.roux-tooltip-content.open
{
    display: flex;
    opacity: 1;
    z-index: 1000;
    transform: translateY(0);
}

.roux-tooltip-content.hiding
{
    display: flex;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
}

.roux-tooltip-content-control
{
    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
}

.roux-tooltip.open
{
    box-shadow: var(--input-active-bs);
}

.roux-tooltip.hiding
{
    box-shadow: none;
}

.roux-tooltip:not(.button):not(.no-styling)
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background-color: var(--tooltip-bg);
    border-radius: 15px;
    /* padding: var(--button-padding); */

    width: var(--tooltip-size);
    height: var(--tooltip-size);
    /* display: inline-block; */

    box-shadow: none;
    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;

    line-height: var(--tooltip-line-height);

    cursor: pointer;
    /* margin: var(--button-margin); */
}

.roux-tooltip > .tooltip-icon
{
    width: var(--tooltip-icon-size);
    height: var(--tooltip-icon-size);
    color: var(--icon-colour);
    transition: color 0.4s, background-color 0.4s;
}

.roux-tooltip > .tooltip-icon > svg
{
    width: var(--tooltip-icon-size);
    height: var(--tooltip-icon-size);
}


.roux-tooltip .roux-tooltip-content .tooltip-content-icon
{
    width: var(--tooltip-icon-size);
    height: var(--tooltip-icon-size);
    color: var(--icon-colour);
    transition: color 0.4s, background-color 0.4s;

    /* margin-right: 20px; */

    /*
    padding-left: 5px;
    padding-right: 5px;
    border-right: 2px solid var(--pane-label-image-div-line);
    margin-right: 5px;
    */
}

svg.tooltip-content-icon
{
    width: var(--tooltip-icon-size);
    height: var(--tooltip-icon-size);
}

.roux-tooltip-stage
{
    position: absolute;
    top: 0;
    left: 0p;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.tooltip-text-padding
{
    padding: 0px 10px 10px 10px;
}