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

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

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



    button,
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        color: var(--color-white);
        background: transparent;
        border: 1px solid var(--color-white);
        line-height: calc(3em - 2px);
        font-weight: 700;
    }

    button:hover,
    .button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover {
        background: var(--color-gray-7);
        color: var(--color-orange-light);
        opacity: 1;
    }
    
    button .icon:before, 
    .button .icon:before {
        color: var(--color-orange);
        display: inline-block;
        font-family: var(--font-icons);
        margin-right: 1em;
        transform: translateX(0);
        transition-property: transform;
        transition-duration: 0.1s;
        transition-timing-function: ease-in;
    }

    button:hover .icon:before, 
    .button:hover .icon:before {
        transform: translateX(-0.25em);
    }

    button .back:before, 
    .button .back:before {
        content: '\f177 ';
    }

    button .search:before, 
    .button .search:before {
        content: '\e80b ';
    }