/********************
 * Global Variables *
 ********************
 * All globally-accessible custom CSS variables for Exordia.
 *
 * Access them using `var(--name);`.
 */

:root {
    --exordia-border-width: 2px;
    --exordia-overlay-hover-hue: 30;
    --exordia-overlay-active-hue: 270;
    --exordia-overlay-lightness: 95%;
}


/******************
 * General Layout *
 ******************
 * Any additional layout setup (margin / padding) beyond Bootstrap's builtins.
 */

/* Enforce an aspect ratio of 1:1 on `.cell`s. */
.cell {
    /* Set the vertical padding to 100% (of the width), accounting for the border. */
    border-width: var(--exordia-border-width);
    padding-bottom: calc(100% - 2 * var(--exordia-border-width))!important;
}


/*****************
 * Button Styles *
 *****************
 * The buttons of the puzzle board are styled according to some custom classes:
 *   - .active ... Currently toggled on (by Bootstrap).
 *   - .pending ... Would be toggled by a button click.
 *
 * Along for the ride are the common button pseudoclasses:
 *   - :hover ... Is being hovered over (i.e. mouse is above it).
 *   - :active ... Currently being activated (i.e. pressed down). Unused.
 *   - :focus ... Has received focus (i.e. was just clicked on, or tabbed to).
 *   - :disabled ... Disabled in HTML (i.e. doesn't respond to clicks).
 *
 * Recall that :active MUST come after :hover to be effective [1]
 *
 * In the absence of a SASS preprocessor, we mix the pseudoclasses (and colors)
 * manually.
 *
 * [1]: https://www.w3schools.com/css/css_pseudo_classes.asp
 */

/* Hovering over a button adds a tiny bit of color, with luminosity depending on
 * whether the button is currently .active
 */
#game .btn:not(.active):hover {
    background-color: hsl(var(--exordia-overlay-hover-hue), 100%, var(--exordia-overlay-lightness));
}
#game .btn.active:hover {
    background-color: hsl(var(--exordia-overlay-hover-hue), 100%, calc(100% - var(--exordia-overlay-lightness)));
}

/* Any pending changes pulse slowly in their new color. */
#game .btn.pending.active {
    background-color: hsl(var(--exordia-overlay-active-hue), 100%, var(--exordia-overlay-lightness));
    animation: pulse 1.5s infinite;
}
#game .btn.pending:not(.active) {
    background-color: hsl(var(--exordia-overlay-active-hue), 100%, calc(100% - var(--exordia-overlay-lightness)));
    animation: pulse 1.5s infinite;
}

/* Give each button first or last row or column of the #game board a dashed border. */
#game>.grid>.row:first-child     .btn,  /*   First row */
#game>.grid>.row:last-child      .btn,  /*    Last row */
#game>.grid>.row>div:first-child .btn,  /* First column */
#game>.grid>.row>div:last-child  .btn   /*  Last column */ {
    border-style: dashed;
}

/* Override Bootstrap's default behavior of adding a box-shadow to focused buttons. */
.btn:focus {
    box-shadow: none;
}

/* Override Bootstrap's behavior of making disabled buttons have transparent backgrounds. */
.btn:disabled {
    opacity: 1!important;
}
.btn.active:disabled {
    background-color: var(--bs-dark)!important;
}


/**************
 * Animations *
 **************/
.pulse {
    animation: pulse 1.5s infinite;
}

.shake {
    animation: shake 0.5s ease-in-out;
}


/* A pulsing black box-shadow, adapted from [1].
 *
 * [1]: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/
 */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* A shaking animation that shakes twice. */
@keyframes shake {
      0% { transform: rotate( 0deg); }
     20% { transform: rotate( 10deg); }
     30% { transform: rotate(  0deg); }
     40% { transform: rotate(-10deg); }
     50% { transform: rotate(  0deg); }
     60% { transform: rotate( 10deg); }
     70% { transform: rotate(  0deg); }
     80% { transform: rotate(-10deg); }
    100% { transform: rotate(  0deg); }
}