/* ======== Button ======== */
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
    gap: var(--button-sm-gap);
    border-radius: var(--radius-md);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.button__icon {
    fill: var(--color-text-strong);
}


/* ======== Variations de taille ======== */
.button--large {
    padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
    font-family: var(--font-highlight);
    font-size: var(--text-button-lg);
}

/* ======== Variations de style ======== */
.button--highlight {
    color: var(--color-text-strong);
    background-color: var(--color-button-highlight);
    border: solid 1px var(--color-button-highlight);
}
.button--highlight:hover {
    background-color: var(--color-bg-transparent);
}

.button--primary {
    color: var(--color-text-on-color);
    background-color: var(--color-button-primary);
}
.button--primary:hover {
    background-color: var(--color-button-primary-hover);
}

.button--secondary {
    color: var(--color-text-strong);
    border: solid 1px var(--color-border-praline);
}
.button--secondary:hover {
    background-color: var(--color-button-secondary-hover);
}

/* ======== Variations de couleur OG======== */

/* Anissa */
.button--anissa {
    background-color: var(--color-bg-anissa);
    border: solid 1px var(--color-bg-anissa);
}
.button--anissa:hover {
    background-color: var(--color-bg-transparent);
}

/* Hugo */
.button--hugo {
    color: var(--color-text-strong);
    background-color: var(--color-bg-hugo);
    border: solid 1px var(--color-bg-hugo);
}
.button--hugo:hover {
    background-color: var(--color-bg-transparent);
}

/* Sacha */
.button--sacha {
    color: var(--color-text-strong);
    background-color: var(--color-bg-sacha);
    border: solid 1px var(--color-bg-sacha);
}
.button--sacha:hover {
    background-color: var(--color-bg-transparent);
}

/* Shannen */
.button--shannen {
    color: var(--color-text-strong);
    background-color: var(--color-bg-shannen);
    border: solid 1px var(--color-bg-shannen);
}
.button--shannen:hover {
    background-color: var(--color-bg-transparent);
}

/* Valentin */
.button--valentin {
    color: var(--color-text-strong);
    background-color: var(--color-bg-valentin);
    border: solid 1px var(--color-bg-valentin);
}
.button--valentin:hover {
    background-color: var(--color-bg-transparent);
}


/* == États == */
.button.button--disabled {
    background-color: var(--color-bg-transparent);
    color: var(--color-text-disabled);
    border-color : var(--color-bg-transparent);
    cursor:not-allowed;
}