:root{
    --toolbar-bg: #BBB;
    --toolbar-bg-strong: #DDD;
    --toolbar-bg-stronger: #FFF;
}

[data-theme="dark"] {
    --toolbar-bg: #444;
    --toolbar-bg-strong: #222;
    --toolbar-bg-stronger: #111;
}

.roux-toolbar
{
    display: flex;
    flex-direction: row;

    align-items: center;

    background-color: var(--toolbar-bg);

    padding: 2px;

    transition: color 0.4s, background-color 0.4s; 

    width: fit-content;

    /* margin-bottom: 5px; */
}

.roux-toolbar.strong-bg
{
    background-color: var(--toolbar-bg-strong);
}

.roux-toolbar.stronger-bg
{
    background-color: var(--toolbar-bg-stronger);
}

.roux-select-toolbar
{
    display: none;
    transition: opacity 0.4s, transform 0.4s; 
    transform: translateX(10px);
}

.roux-select-toolbar.showing
{
    display: flex;
    opacity: 0;
    transform: translateX(10px);
}

.roux-select-toolbar.active
{
    display: flex;
    opacity: 1;
    transform: translateX(0px);
}

.roux-toolbar.round
{
    border-radius: 20px;
    padding-left: 4px;
}

.roux-toolbar .button
{
    /* margin-left: 5px; */
}

.roux-toolbar .roux-input
{
    margin-bottom: 0px;
    margin-left: 0px;
}