:root {
    --button-bg: #DDD;
    --button-bg-stronger: #EEE;
    --button-bg-stronger-open: #FFF;
    --button-bg-hover: #AAA;

    --button-bg-disabled: #AAA;

    --button-bg-active: #EEE;
    --button-bs-active: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.3) 0px 0px 3px 2px;

    --button-width: fit-content;
    --button-margin: 2px;
    
    --button-height: 40px;
    --button-line-height: calc(var(--button-height) - 4px);
    --button-padding: 0px 10px 0px 10px;
    

    --button-raidus: 4px;
    --button-raidus-round: 999px;

    --button-label-margin: 5px;
    --button-label-min-width: 80px;
    --button-img: 20px;

    --button-height-larger: 50px;
    --button-line-height-larger: calc(var(--button-height-larger) - 4px);
    --button-padding-larger: 0px 12px;
    --button-img-larger: 26px;

    --icon-colour: var(--primary);

    --button-height-small: 28px;
    --button-line-height-small: calc(var(--button-height-small) - 4px);
    --button-img-small: 18px;
    --button-padding-small: 0px 5px 0px 5px;

    --button-height-tiny: 20px;
    --button-line-height-tiny: calc(var(--button-height-tiny) - 4px);
    --button-img-tiny: 14px;
    --button-padding-tiny: 0px 2px 0px 2px;

    --button-loader-dim: 16px;
    --button-loader-col: #333;

    --color-bg-icon: #111;

    --button-flash-col: #333;
}

[data-theme="dark"] {
    --button-bg: #333;
    --button-bg-stronger: #222;
    --button-bg-stronger-open: #000;
    --button-bg-hover: #555;

    --button-bg-disabled: #555;

    --button-bg-active: #222;
    --button-bs-active: rgba(255, 255, 255, 0.05) 0px 6px 24px 0px, rgba(255, 255, 255, 0.3) 0px 0px 3px 2px;

    --icon-colour: var(--secondary);

    --button-loader-col: #CCC;

    --color-bg-icon: #EEE;

    --button-flash-col: #CCC;
}

.button-container
{
    /* width: fit-content; */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.button-container.vertical .button
{
    display: block;
}

.button
{
    display: flex;
    flex-direction: row;
    align-items: center;

    background-color: var(--button-bg);
    border-radius: var(--button-raidus);
    padding: var(--button-padding);
    width: var(--button-width);
    height: var(--button-height);
    /* display: inline-block; */

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

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

    cursor: pointer;
    margin: var(--button-margin);

    position: relative; /*Included so you can add absolute elements relative to button*/
}

.button.v-button
{
    flex-direction: column;
    align-items: center;
    height: fit-content !important;
    border-radius: 10px;
    width: 50%;
    box-sizing: border-box;
    padding: 5px;
}

.button.primary
{
    background-color: var(--primary-darker);
}

.button.secondary
{
    background-color: var(--secondary-darker);
}

.button:has(.button-loader)
{
    cursor: wait;
    pointer-events: none;
}

.button:disabled
{
    cursor: default;
    pointer-events: none;
    background-color: var(--button-bg-disabled);
}

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

.button.danger
{
    background-color: var(--danger-bg);
}

.button.small
{
    height: var(--button-height-small);
    line-height: var(--button-line-height-small);
    padding: var(--button-padding-small);
}

.button.larger
{
    height: var(--button-height-larger);
    line-height: var(--button-line-height-larger);
    padding: var(--button-padding-larger);
}

.button.smal.icon-only
{
    width: var(--button-height-small);
    height: var(--button-height-small);
    box-sizing: border-box;
}

.button.tiny
{
    height: var(--button-height-tiny);
    line-height: var(--button-line-height-tiny);
    padding: var(--button-padding-tiny);
}

.button.active
{
    background-color: var(--button-bg-active);
    box-shadow: var(--button-bs-active);
}

.button.round
{
    border-radius: var(--button-raidus-round);
}

input::file-selector-button
{
    background-color: var(--button-bg);
    border-radius: var(--button-raidus);
    color: var(--text-color);
    border: none;
    height: 24px;
    padding: 2px 10px;
    margin-top:2px;
    transition: color 0.4s, background-color 0.4s;
    cursor: pointer;
}

.roux-input.round > input[type=file]::file-selector-button
{
    border-radius: var(--button-raidus-round);
}



input::file-selector-button:hover
{
    background-color: var(--button-bg-hover);
}

.button:hover
{
    background-color: var(--button-bg-hover);
}

.button .roux-button-tooltip
{
    display: none;
    position: absolute;
}

.button:hover .roux-button-tooltip
{
    display: block;
}

.button img
{
    width: var(--button-img);
    height: var(--button-img);
}

.button .button-label
{
    /* display: inline-block; */
    margin-left: var(--button-label-margin);
    /* vertical-align: middle; */
    user-select: none;
    min-width: var(--button-label-min-width);
    margin-right: var(--button-label-margin);

    text-wrap: nowrap;

    transition: color 0.4s;
}

.button.v-button .button-label
{
    line-height: 20px;
    height: 20px;
}

.button.v-button .button-icon
{
    height: 30px;
    border-right: none !important;
    border-bottom: 1px solid var(--input-image-div-line);
    padding-bottom: 5px;
    width: 100% !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
}

.button.v-button.small .button-icon
{
    height: 22px;
    padding-top: 3px;
}

.button .button-label.hidden
{
    display: none;
}

.button-icon
{
    width: var(--button-img);
    height: var(--button-img);
    color: var(--icon-colour);
    transition: color 0.4s, background-color 0.4s;

    /* padding-left: 8px; */
    /* vertical-align: middle; */
}

.button-icon.no-color
{
    color: var(--color-bg-icon);
}

.button.primary .button-icon,
.button.secondary .button-icon
{
    color: #FFF;
}

.button.lined:has(.button-label):not(:has(.button-label.hidden)) .button-icon
{
    border-right: 2px solid var(--input-image-div-line);
    padding-right: 8px;
    margin-right: 3px;
}

.button.primary.lined:has(.button-label):not(:has(.button-label.hidden)) .button-icon,
.button.secondary.lined:has(.button-label):not(:has(.button-label.hidden)) .button-icon,
{
    border-right: 2px solid #FFF;
}

.button.danger .button-icon
{
    color: var(--color-bg-icon);
}

.button-icon > svg
{
    width: var(--button-img);
    height: var(--button-img);
}


.button.small .button-icon
{
    width: var(--button-img-small);
    height: var(--button-img-small);
}

.button.small .button-icon > svg
{
    width: var(--button-img-small);
    height: var(--button-img-small);
}

.button.larger .button-icon
{
    width: var(--button-img-larger);
    height: var(--button-img-larger);
}

.button.larger .button-icon > svg
{
    width: var(--button-img-larger);
    height: var(--button-img-larger);
}

.button.lined.small:has(.button-label) .button-icon
{
    padding-right: 4px;
    margin-right: 0px;
}

.button.sized-to-content .button-label
{
    min-width: 30px;
    width: fit-content;
}

.button.lined:has(:not(.button-label)):has(.button-loader) .button-icon
{
    border-right: 2px solid var(--input-image-div-line);
    margin-right: 8px;
    padding-right: 8px;
}

.button.lined.small:has(:not(.button-label)):has(.button-loader) .button-icon
{
    padding-right: 4px;
}

.button-loader {
    width: var(--button-loader-dim); ;
    height: var(--button-loader-dim); ;
    border: 2px solid var(--button-loader-col);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: bl-rotation 0.7s linear infinite;
}

@keyframes bl-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.button.hidden
{
    display: none;
}

.button.dropdown-control.open:not(.hiding)
{
    background-color: var(--button-bg-active);
}

.button.stronger-bg.dropdown-control.open:not(.hiding)
{
    background-color: var(--button-bg-stronger-open);
}

.button.flash
{
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-name: button-flash;
}

@keyframes button-flash {
    0%   {
        background-color: var(--button-bg);
    }
    50%  {
        background-color: var(--button-flash-col);
    }
    100% {
        background-color: var(--button-bg);
    }
}