/* ---------------- 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);

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

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

@media screen and (max-width: 450px)
{
    button:hover
    {
        background-color: var(--bg-color);
        color: var(--fg-color);
    }
}

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

    &:hover
    {
        color: white;
        background-color: orange;
    }
}

/* ---------------- BOTTONI GROSSI ---------------- */
big-button
{
    --fg-color: black;
    --bg-color: white;
    --hfg-color: black;
    --hbg-color: var(--pm-lightgray);
    --ihfg-color: var(--pm-pink);
    --ihbg-color: var(--pm-darkgray);
    
    display: inline-block;
    color: var(--fg-color);
    background-color: var(--bg-color);
    padding: .5rem;
    border-radius: .5rem;
    cursor: pointer;
    box-shadow: var(--shadow2);
    margin-left: 1rem;
    margin-top: 1rem;
    transition: all .25s ease-in-out;
    
    & *
    {
        transition: all .25s ease-in-out;
    }

    &>label
    {
        font-size: 125%;
        
        &>i
        {
            display: inline-block;
            width: 3rem !important;
            padding: .5rem;
            box-shadow: var(--shadow2);
            border-radius: .25rem;
            margin-right: 1rem;
        }
    }
    
    &:hover
    {
        color: var(--hfg-color);
        background-color: var(--hbg-color);
        
        &>label
        {
            font-weight: bold;

            &>i
            {
                color: var(--ihfg-color);
                background-color: var(--ihbg-color);
            }
        }

    }
}

.BigButtonsContainer
{    
    &>big-button{width: calc(100%/var(--cols) - 1.25rem);}
    &>big-button{height: calc(100%/var(--rows) - 1.25rem);}
}

/*-------------------------------- 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;}