button,
input,
a {
    color: var(--var-color-black);
    background-color: transparent;
    text-decoration: none;
    width: fit-content;
    transition: all 0.2s ease-in-out;
}

input {
    background-color: var(--main-white);
}

button,
input[type="submit"] {
    cursor: pointer;
}

button.valider,
input.valider,
a.valider {
    padding: 7px;
    border: 2px solid var(--color-blue-light);
    border-radius: 3px;
    font-weight: bold;
}

button.valider:hover,
input.valider:hover,
a.valider:hover {
    background-color: var(--color-blue-light);
    color: white;
}

button.modifier,
input.modifier,
a.modifier {
    padding: 7px;
    border: 2px solid var(--color-orange);
    border-radius: 3px;
    font-weight: bold;
}

button.modifier:hover,
input.modifier:hover,
a.modifier:hover {
    background-color: var(--color-orange);
}

button.supprimer,
input.supprimer,
a.supprimer {
    padding: 7px;
    border: 2px solid var(--color-red);
    border-radius: 3px;
    font-weight: bold;
}

button.supprimer:hover,
input.supprimer:hover,
a.supprimer:hover {
    background-color: var(--color-red);
}

button.ajouter,
input.ajouter,
a.ajouter {
    padding: 7px;
    background-color: var(--color-blue-light);
    border-radius: 3px;
    font-weight: bold;
    border: 2px solid var(--color-blue-light);
    color: white;
}

button.ajouter:hover,
input.ajouter:hover,
a.ajouter:hover {
    border: 2px solid var(--color-black);
}

button.ajouter::before,
input.ajouter::before,
a.ajouter::before {
    content: "+";
    padding-right: 10px;
    font-weight: bold;
}

button.ajouter:hover::before,
input.ajouter:hover::before,
a.ajouter:hover::before {
    content: "✓";
    font-weight: normal;
    font-size: 10px;
}


/* ---------------------------------------------------------------- */

input[type="search"],
input[type="list"] {
    border: none;
    padding: 10px;
    font-size: 18px;
    width: 60%;
    /* background-color: transparent; */
    color: var(--color-white);
}

input[type="search"]::placeholder,
input[type="list"]::placeholder {
    color: var(--color-white);
    opacity: 0.5;
}

input[type="search"]:focus,
input[type="list"]:focus {
    outline: none;
}

input[type="text"],
input[type="password"],
input[type="mail"] {
    border: 1px solid var(--color-black);
    width: 90%;
    padding: 15px;
    /* background-color: transparent; */
    color: var(--color-black);
}

button.small,
input.small {
    width: fit-content !important;
}


/* ---------------------------------------------------------------- */

textarea,
select {
    border: 1px solid var(--color-black);
    width: 100%;
    /* background-color: transparent; */
    background-color: var(--main-white);
    color: var(--color-black);
    resize: none;
}

select {
    padding: 15px;
}

select option {
    padding: 10px;
}