/* BUTTONs */

/*
.button.button-primary,
input[type="submit"].button-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.button.button-primary:hover,
input[type="submit"].button-primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.button.button-secondary,
input[type="submit"].button-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.button.button-secondary:hover,
input[type="submit"].button-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

.button.button-outline-primary,
input[type="submit"].button-outline-primary {
    background-color: var(--transparent);
    border-color: var(--primary);
    color: var(--primary);
}

.button.button-outline-primary:hover,
input[type="submit"].button-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.button.button-outline-neutral-darker,
input[type="submit"].button-outline-neutral-darker {
    background-color: var(--transparent);
    border-color: var(--neutral-darker);
    color: var(--neutral-darker);
}

.button.button-outline-neutral-darker:hover,
input[type="submit"].button-outline-neutral-darker:hover {
    background-color: var(--neutral-darker);
    border-color: var(--neutral-darker);
    color: var(--white);
}

.button.button-outline-white,
input[type="submit"].button-outline-white {
    background-color: var(--transparent);
    border-color: var(--white);
    color: var(--white);
}

.button.button-outline-white:hover,
input[type="submit"].button-outline-white:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.button.button-text,
input[type="submit"].button-text {
    color: var(--neutral-darker);
}

.button.button-text:hover,
input[type="submit"].button-text:hover {
    color: var(--neutral);
}

.button:disabled,
.button.disabled {
    background-color: var(--neutral-light);
    border-color: var(--neutral-light);
}

.button:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
            box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
*/
/* ! REDOING BUTTONS STRUCTURE  */

/* Dark Background Variations */ 
/*
.button.button-primary-dark,
input[type="submit"].button-primary-dark {
    background-color: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow);
    border: 2px solid var(--white);
}

.button.button-primary-dark:hover,
input[type="submit"].button-primary-dark:hover {
    background-color: transparent;
    color: var(--white);
}

.button.button-outline-white-dark,
input[type="submit"].button-outline-white {
    background-color: var(--transparent);
    border-color: var(--white);
    color: var(--white);
}

.button.button-outline-white-dark:hover,
input[type="submit"].button-outline-white:hover {
    background-color: var(--white-transparency-30);
}


*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css');

.button {
    display: flex;
    cursor: pointer;
}

.button > * {
    display: inline-block;
    margin: 0;
    color: inherit !important;
    transition: all .3s ease-in-out;
}

.button.button-primary,
input[type="submit"].button-primary {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.button.button-primary:hover,
input[type="submit"].button-primary:hover {
    background-color: var(--primary-dark);
    color: var(--white);
    border-color: var(--primary-dark);
}

.button.button-primary:disabled,
input[type="submit"].button-primary:disabled {
    background-color: var(--primary-light);
    color: #ffffff;
    border-color: var(--primary-light);
}

.button.button-secondary,
input[type="submit"].button-secondary {
    background-color: var(--white);
    color: var(--primary);
    border-color: var(--primary);
}

.button.button-secondary:hover,
input[type="submit"].button-secondary:hover {
    background-color: var(--primary-dark);
    color: var(--white);
    border-color: var(--primary-dark);
}

.button.button-secondary:disabled,
input[type="submit"].button-secondary:disabled {
    background-color: var(--white);
    color: var(--primary-light);
    border-color: var(--primary-light);
}


.button.button-primary-dark,
input[type="submit"].button-primary-dark {
    background-color: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.button.button-primary-dark:hover,
input[type="submit"].button-primary-dark:hover {
    background-color: var(--transparent);
    color: var(--white);
    border-color: var(--white);
}

.button.button-primary-dark:disabled,
input[type="submit"].button-primary-dark:disabled {
    background-color: var(--white-transparency-80);
    color: var(--neutral-lighter);
    border-color: var(--transparent);
}

.button.button-secondary-dark,
input[type="submit"].button-secondary-dark {
    background-color: var(--transparent);
    color: var(--white);
    border-color: var(--white);
}

.button.button-secondary-dark:hover,
input[type="submit"].button-secondary-dark:hover {
    background-color: var(--white-transparency-30);
    color: var(--white);
    border-color: var(--white);
}

.button.button-secondary-dark:disabled,
input[type="submit"].button-secondary-dark:disabled {
    background-color: var(--white-transparency-60);
    color: var(--neutral);
    border-color: var(--transparent);
}

.button.button-accent,
input[type="submit"].button-accent {
    background-color: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

.button.button-accent:hover,
input[type="submit"].button-accent:hover {
    background-color: var(--secondary-dark);
    color: var(--white);
    border-color: var(--secondary-dark);
}

.button.button-accent:disabled,
input[type="submit"].button-accent:disabled {
    background-color: var(--secondary-light);
    color: var(--white);
    border-color: var(--secondary-light);
}