/* ---------------- BOTTONI ---------------- */

button
{
    --fg-color: white;
    --bg-color: black;

    display: inline-block;
    color: var(--fg-color);
    background-color: var(--bg-color);
    border: 1px solid var(--bg-color);
    padding: .125rem .25rem;
    border-radius: .125rem;
    cursor: pointer;
    box-shadow: var(--shadow2);
}

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

button.OPERATION {--bg-color: blue;}
button.NAVIGATION {--bg-color: orange;}
button.CHOICE {--bg-color: darkolivegreen;}
button.ACCEPT,button.CONFIRM {--bg-color: green;}
button.CANCEL,button.DELETE {--bg-color: red;}

.BackButton
{
    color: orange;
    background-color: white;
    border-radius: .25rem;
    padding: .25rem .5rem;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
}

.BackButton:hover
{
    color: white;
    background-color: orange;
}

/*-------------------------------- KI-BUTTON --------------------------------*/

ki-button,
ki-button2
{
    display: inline-block;
    position: relative;
    color: var(--fg-color);
    background-color: var(--bg-color);
    border: 1px solid var(--bg-color);
    border-radius: .25rem;
    padding: .125rem .25rem;
    cursor: pointer;
    box-shadow: var(--shadow3);
}

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

ki-button-content
{
    display: inline-block;
    text-align: center;
    position: relative;
}

ki-button
{
    --bg-color: black;
    --fg-color: white;
}

ki-button.OPERATION {--bg-color: blue; --fg-color: white;}
ki-button.NAVIGATION {--bg-color: blue; --fg-color: white;}
ki-button.ACCEPT {--bg-color: green; --fg-color: white;}
ki-button.CREATE{--bg-color: green; --fg-color: white;}
ki-button.CANCEL{--bg-color: red; --fg-color: white;}
ki-button.DELETE{--bg-color: red; --fg-color: white;}

ki-button[disabled],
ki-button2[disabled]
{
    --bg-color: lightgray !important;
    --fg-color: white !important;
    pointer-events: none !important;
}

/*-------------------------------- KI-BUTTON 2 STATE --------------------------------*/

ki-button2[value=true] {--bg-color: green; --fg-color: white;}
ki-button2[value=false] {--bg-color: red; --fg-color: white;}

ki-button2[BH][value=true] {--bg-color: blue; --fg-color: white;}
ki-button2[BH][value=false] {--bg-color: white; --fg-color: lightgrey;}
ki-button2[GH][value=true] {--bg-color: green; --fg-color: white;}
ki-button2[GH][value=false] {--bg-color: white; --fg-color: lightgrey;}
ki-button2[RH][value=true] {--bg-color: red; --fg-color: white;}
ki-button2[RH][value=false] {--bg-color: white; --fg-color: lightgrey;}
ki-button2[OH][value=true] {--bg-color: orange; --fg-color: white;}
ki-button2[OH][value=false] {--bg-color: white; --fg-color: lightgrey;}

ki-button2 true,
ki-button2 false
{display: none;}

ki-button2[value=true] true,
ki-button2[value=false] false
{display: inline-block;}