/* .............................................................................
BUTTONS

TODO CHECK
Ne pas mettre de classe interne ALT sur un bouton, juste des ALT direct sur le bouton.
............................................................................. */

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
input[type='submit'].btn,
.bDashboard__pagination > *:not(.next, .prev) {appearance: none;position:relative;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 400;font-size: 1em;line-height: 1.2;color: var(--color-base);padding: 0 1.6em;text-transform: none;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;border: 1px solid var(--color-base);border-radius: 0.5em;transition: color 0.3s, background-color 0.3s, border-color 0.3s;}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1em 0;}
.btn__icon {z-index: 1;display: block;flex: 0 0 auto;padding: 0;font-size: 1.5em;}
.btn__label + .btn__icon {margin-right: -0.25em;}

	/* Spacing entre le label et l'icone. */
	.btn > * + * {padding-left: 0.2em;}

	/* Pour que le target dans event delegation soit le button au lieu du contenu a l'interieur. */
	.btn * {pointer-events: none;}

	/* Hover */
	.btn:hover:not(:disabled), .bDashboard__pagination > *:not(.prev, .next):hover {color:var(--color-base-on-dark); background-color: var(--color-base); }

	/* Disabled */
	.btn:disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none;}

	/* On dark */
	.onDark .btn {color:var(--color-green);border-color:var(--color-green);}

		/* Hover */
		.onDark .btn:hover:not(:disabled) {color:var(--color-base); background-color: var(--color-green); }

	/* Danger */
	a.btn--danger, button.btn--danger {border-color: var(--color-accent);}

		/* Hover */
		.btn--danger:hover:not(:disabled) {color: var(--color-white);background-color: var(--color-accent);}
	
	/* 
	STATE / Active. */
	button.btn.active:not(:disabled),
	a.btn.active:not(:disabled),
	input[type='submit'].btn.active:not(:disabled) {color: var(--color-white); background-color: var(--color-orange);border-color: var(--color-orange);}
	

	/* 
	ALT:
	Filled. */
	button.btn--filled,
	a.btn--filled,
	input[type='submit'].btn--filled,
	.bDashboard__pagination .current {color: var(--color-green); background-color: var(--color-green-dark); }

		/* Hover */
		.btn--filled:hover:not(:disabled), .bDashboard__pagination .current:hover {color:var(--color-green-dark);background-color: var(--color-white);}
		.bDashboard__pagination .current:hover {background-color: transparent;}

		/* On dark */
		.onDark .btn--filled {color:var(--color-green-dark); background-color: var(--color-green); border-color: var(--color-green); }

			/* Hover */
			.onDark .btn--filled:hover:not(:disabled) {color:var(--color-green-dark); background-color: var(--color-white); border-color: var(--color-white); }

		/* Danger */
		a.btn--danger.btn--filled, button.btn--danger.btn--filled {color: var(--color-white);background-color: var(--color-accent);}

			/* Hover */
			a.btn--danger.btn--filled:hover:not(:disabled), button.btn--danger.btn--filled:hover:not(:disabled) {color: var(--color-accent);background-color: var(--color-white);}

	/* 
	ALT:
	Subtle.
	Le label du bouton doit être aussi dans l'attribut "title" de .btn__label 
	pour qu'il n'y ait pas de layout shift on hover.
	https://stackoverflow.com/questions/5687035/css-bolding-some-text-without-changing-its-containers-size */
	button.btn--subtle,
	a.btn--subtle,
	input[type='submit'].btn--subtle {padding: 0 0.5em;border: none;}
	.btn--subtle .btn__label {padding: 0.5em 0;}
	.btn--subtle .btn__label::after {display: block;content: attr(title);font-weight: 700;height: 0;color: transparent;overflow: hidden;visibility: hidden;}

		/* Hover */
		.btn--subtle:hover:not(:disabled) {color: var(--color-base); background-color: transparent; }
		.btn--subtle:hover:not(:disabled) .btn__label {font-weight: 700; }

		/* On dark */
		.onDark .btn--subtle {color:var(--color-base-on-dark); }

			/* Hover */
			.onDark .btn--subtle:hover:not(:disabled) {color: var(--color-base-on-dark); background-color: transparent; }

	/* 
	ALT:
	Simple. */
	button.btn--simple,
	a.btn--simple,
	input[type='submit'].btn--simple {font-weight: 700;color: var(--color-white);background-color: var(--color-green-vivid);border: none;border-radius: 0; }

		/* Hover */
		.btn--simple:hover:not(:disabled) {color: var(--color-white);background-color: var(--color-pink); }

		/* 
		DOUBLE ALT!
		Darker. */
		button.btn--simple--darker,
		a.btn--simple--darker,
		input[type='submit'].btn--simple--darker {background-color: var(--color-green-dark); }


	/* 
	ALT:
	Full width mobile. */
	button.btn--fullWM,
	a.btn--fullWM,
	input[type='submit'].btn--fullWM { }

		/* Full width */
		@media (max-width:46rem) {
			button.btn--fullWM,
			a.btn--fullWM,
			input[type='submit'].btn--fullWM {width: 100%; text-align: center; }
		}



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG.
La stroke 3-quart est dans le ::before. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none;font-size: 2.5em;border: none;color: var(--color-base);background: var(--color-beige);font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;padding: 0;width: 1em;height: 1em;border-radius: 50%; transition: background-color 0.3s; }
.btnIcon::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; border-radius: 50%; border: 1px solid currentColor; border-top-color:transparent; transform: rotate(45deg); }
.btnIcon .svgIcon {font-size: 0.6em;position: absolute;top: 50%;left:50%; transform:translate3d(-50%, -50%, 0); }

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon {cursor: pointer; background-color: var(--color-white); }

	/*
	ALT:
	Inverser la stroke : espace vide a gauche au lieu d'a droite. */
	button.btnIcon--invertStroke,
	a.btnIcon--invertStroke,
	.btnIcon--invertStroke { }
	.btnIcon--invertStroke::before {transform: rotate(-45deg); }

	/*
	ALT:
	Inverser la couleur : blanc au lieu de beige. */
	button.btnIcon--invertColor,
	a.btnIcon--invertColor,
	.btnIcon--invertColor{
		background: var(--color-white);
	}
		button.btnIcon--invertColor:hover,
		a.btnIcon--invertColor:hover,
		.btnIcon--invertColor:hover{
			background: var(--color-beige);
		}

/*
BUTTON / Alert
Bouton pour alerte emploi.
Icone a gauche, texte a droite. */
button.btnAlert,
a.btnAlert,
.btnAlert {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-size: 1em;font-weight: normal;line-height: 1.2;color: var(--color-base);margin:0;padding: 0 0.1em;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;transition: color 0.3s;}
.btnAlert__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.6em 0;}
.btnAlert__icon {z-index: 1;display: block;flex: 0 0 auto;font-size: 2.04em;padding: 0.45em;background: var(--color-base);color: #fff;border: 1px solid var(--color-base);border-radius: 50%;transition: background-color 0.3s, color 0.3s;}

	/* Spacing entre le label et l'icone. */
	.btnAlert > * + * {margin-left: 0.6em;}

	/* Pour que le target dans event delegation soit le button au lieu du contenu a l'interieur. */
	.btnAlert * {pointer-events: none;}

	/* Hover */
	.btnAlert:hover:not(:disabled),
	a:hover .btnAlert {color: var(--color-red); }
	.btnAlert:hover:not(:disabled) .btnAlert__icon,
	a:hover .btnAlert .btnAlert__icon {background-color: transparent; color: var(--color-red); }

	/* Disabled */
	.btnAlert:disabled {opacity: 0.5; cursor: default;}

	/* Smaller on mobile */
	@media (max-width:47rem) {
		button.btnAlert,
		a.btnAlert,
		.btnAlert {font-size: 0.75em; }
	}