:root {
    /*DEFAULT BUTTON*/

    /**BUTTON COLORS**/
    --btn-lieu-background-color: rgba(255, 255, 255, 1);
    --btn-lieu-color: 68, 68, 68;
    --btn-lieu-border-color: var(--btn-lieu-color);
    --btn-lieu-hover-box-shadow-color: 136, 136, 136;
    --btn-lieu-opacity-light: 0.1;
    --btn-lieu-opacity-dark: 0.3;

    /**PADDINGS**/
    --btn-lieu-padding-x: 1.5rem;
    --btn-lieu-padding-y: 0.375rem;

    /**BORDERS**/
    --btn-lieu-border-width: 2px;
    --btn-lieu-border-radius: .25rem;

    /**BOX SHADOWS**/
    --btn-lieu-box-shadow-light: rgba(var(--btn-lieu-color), var(--btn-lieu-opacity-light));
    --btn-lieu-box-shadow-dark: rgba(var(--btn-lieu-color), var(--btn-lieu-opacity-dark));

    /**FONT SIZE**/
    --btn-lieu-font-size: 1rem;
    --btn-lieu-text-shadow: 0 0 0 rgba(var(--btn-lieu-color), var(--btn-lieu-opacity-light));

    /**SOCIAL BUTTONS**/
    --btn-lieu-social-padding-x: 0rem;
    --btn-lieu-social-padding-y: 1rem;

    /*Facebook*/
    --btn-facebook-color: 24, 119, 242;
    --btn-facebook-border-color: var(--btn-facebook-color);
    --btn-facebook-box-shadow-color: 50, 135, 246;

    /**CLOSE BUTTON**/
    --btn-close-color: 34, 113, 177;
    --btn-close-border-color: var(--btn-close-color);
    --btn-close-box-shadow-color: var(--btn-close-color);
}

/**BASIC BUTTON**/
.lieu__button {
    font-weight: bold;
    padding: var(--btn-lieu-padding-y) var(--btn-lieu-padding-x);
    border: var(--btn-lieu-border-width) solid rgba(var(--btn-lieu-border-color), var(--btn-lieu-opacity-light));
    background-color: var(--btn-lieu-background-color);
    font-size: var(--btn-lieu-font-size);
    text-shadow: var(--btn-lieu-text-shadow);
    border-radius: var(--btn-lieu-border-radius);
    color: rgb(var(--btn-lieu-color));
    box-shadow: 0 0 0 0px rgba(var(--btn-lieu-hover-box-shadow-color), var(--btn-lieu-opacity-light)),
        0 1px 1px 0px var(--btn-lieu-box-shadow-dark),
        0 0px 1px 0px var(--btn-lieu-box-shadow-dark);
    letter-spacing: 1px;
    cursor: pointer;
}

.lieu__button:focus {
    outline: none;
}

.lieu__button:hover {
    box-shadow: 0 0 0 4px rgba(var(--btn-lieu-hover-box-shadow-color), var(--btn-lieu-opacity-light)),
        0 1px 1px 0px var(--btn-lieu-box-shadow-dark),
        0 0px 1px 0px var(--btn-lieu-box-shadow-dark);
    transition: box-shadow 0.3s ease-in-out;
}

/**BASIC BUTTON**/



/**SOCIAL BUTTONS**/
.lieu__button.lieu__button-login {
    padding: var(--btn-lieu-social-padding-y) var(--btn-lieu-social-padding-x);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
    width: 100%;
}


.lieu__button.lieu__button-login.lieu__social-facebook {
    background-color: rgb(var(--btn-facebook-color));
    border-color: rgba(var(--btn-facebook-border-color), var(--btn-lieu-opacity-light));
    background-image: url(../assets/svg/facebook_logo.svg);
}


.lieu__button.lieu__button-login.lieu__social-facebook:hover {
    box-shadow: 0 0 0 4px rgba(var(--btn-facebook-box-shadow-color), var(--btn-lieu-opacity-light)),
        0 1px 1px 0px var(--btn-lieu-box-shadow-dark),
        0 0px 1px 0px var(--btn-lieu-box-shadow-dark);
}

.lieu__button.lieu__button-login.lieu__social-google {
    background-image: url(../assets/svg/google_logo.svg);
}

/**SOCIAL BUTTONS**/


/**CIRCLE BUTTONS**/

.lieu__button.lieu__button-circle {
    border-radius: 50%;
    padding: 0 0.5rem;
    line-height: 14px;
    height: 28px;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Lieu back buttons*/

.lieu__button.flip__back__button {
    border-color: rgba(var(--btn-close-border-color), var(--btn-lieu-opacity-light));
    color: rgb(var(--btn-close-color));
}



.lieu__button.flip__back__button:hover {
    box-shadow: 0 0 0 4px rgba(var(--btn-close-box-shadow-color), var(--btn-lieu-opacity-light)),
        0 1px 1px 0px var(--btn-lieu-box-shadow-dark),
        0 0px 1px 0px var(--btn-lieu-box-shadow-dark);
}