/* AbildskovUndervisning - abildskovundervisning.dk */
/* =====================================================
   TABELMESTER
   animations.css
   ===================================================== */


/* ---------------------------------------
   Aktiv celle
---------------------------------------- */

@keyframes activePulse {

    0%{
        background:#220000;
        box-shadow:
            0 0 4px #ff2020;
    }

    50%{
        background:#770000;

        box-shadow:
            0 0 12px #ff3030,
            0 0 22px #ff3030;
    }

    100%{
        background:#220000;

        box-shadow:
            0 0 4px #ff2020;
    }

}

.active{

    animation:activePulse 1.6s ease-in-out infinite;

}



/* ---------------------------------------
   Blød overgang
---------------------------------------- */

.cell{

    transition:

        background-color .25s,

        border-color .25s,

        color .25s,

        box-shadow .25s;

}



/* ---------------------------------------
   Knapper
---------------------------------------- */

button{

    transition:

        background-color .2s,

        color .2s,

        box-shadow .2s,

        transform .15s;

}

button:hover{

    box-shadow:

        0 0 8px #ff2020;

}

button:active{

    transform:scale(.98);

}



/* ---------------------------------------
   Tabelknapper
---------------------------------------- */

.table-button{

    transition:

        background-color .2s,

        box-shadow .2s,

        transform .15s;

}

.table-button.selected{

    box-shadow:

        0 0 12px #ff3030;

}

.table-button:hover{

    box-shadow:

        0 0 8px #ff2020;

}



/* ---------------------------------------
   Paneler
---------------------------------------- */

.panel{

    transition:

        box-shadow .25s;

}

.panel:hover{

    box-shadow:

        0 0 12px rgba(255,0,0,.18);

}



/* ---------------------------------------
   Færdigskærm
---------------------------------------- */

#finishScreen{

    animation:fadeIn .4s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ---------------------------------------
   Statuslinje
---------------------------------------- */

#statusText{

    min-height:28px;

    letter-spacing:1px;

}



/* ---------------------------------------
   Fokus
---------------------------------------- */

button:focus-visible,
input:focus-visible{

    outline:2px solid #ff4040;

    outline-offset:3px;

}