/*********************************************************************

    ██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗███████╗
    ██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║██╔════╝
    ██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║███████╗
    ██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║╚════██║
    ██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║███████║
    ╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝╚══════╝

 *********************************************************************/



    button,
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        color: var(--color-text-selection);
        background: var(--color-text);
        box-shadow: inset 0 0 0 2px var(--color-text);
        transition-property: box-shadow;
        transition-duration: 0.3s;
        transition-timing-function: ease-in;
    }

    button:hover,
    .button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover {
        color: var(--color-text);
        background: var(--color-text-selection);
        box-shadow: inset 0 0 0 2px var(--color-text);
    }

    button:active,
    .button:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active {
        color: var(--color-text-selection);
        background: var(--color-gray-light-x);
        box-shadow: inset 0 0 0 5px var(--color-text);
    }