.wp-element-button,
.facetwp-load-more,
.facetwp-type-number_range.facetwp-submit {
	clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.wp-block-button a.has-base-background-color:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--tertiary) !important;
}

/* Button - Fill Style
--------------------------------------------- */

.wp-block-button.is-style-fill .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	/* padding: .5em 1em; */
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-darken);
	border-color: var(--wp--preset--color--primary-darken);
}

/* Button - Outline Style
--------------------------------------------- */

.facetwp-load-more,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button-obf.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	border: solid 2px var(--wp--preset--color--primary);
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	position: relative;

	/* padding: .5em 1em; */
	&:before {
		content: '';
		position: absolute;
		top: 5px;
		left: -4px;
		width: 20px;
		height: 2px;
		background: var(--wp--preset--color--primary);
		transform: rotate(-45deg);
		transform-origin: center center;
		transition: .2s ease-in all;
	}

	&:after {
		content: '';
		position: absolute;
		bottom: 6px;
		right: -5px;
		width: 21px;
		height: 2px;
		background: var(--wp--preset--color--primary);
		transform: rotate(-45deg);
		transform-origin: center center;
		transition: .2s ease-in all;
	}
}

.facetwp-load-more:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button-obf.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	border-color: var(--wp--preset--color--primary-darken);
	background-color: transparent;
	color: var(--wp--preset--color--primary-darken);

	&:after,
	&:before {
		background: var(--wp--preset--color--primary-darken);
	}
}

/* Button - Secondary Style
--------------------------------------------- */

.is-style-secondary-button .wp-block-button-obf,
.wp-block.is-style-secondary-button .wp-element-button,
.wp-block-button-obf.is-style-secondary .wp-block-button__link {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-secondary-button:hover .wp-element-button,
.wp-block.is-style-secondary-button:hover .wp-element-button,
.wp-block-button-obf.is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

/* Bouton de niveau 3 */
.is-style-level3.wp-element-button,
.is-style-level3 .wp-element-button {
	font-weight: 600;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 21px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	background-color: transparent;
	display: inline-flex;
	line-height: normal;
	border-color: transparent;
	clip-path: none;

	span {
		position: relative;
		display: flex;
		align-items: center;

		&:before {
			display: block;
			content: '';
			width: calc(100% - 21px);
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			background: var(--wp--preset--color--primary);
		}

		&:after {
			content: '\e803';
			font-family: 'demeurance';
			transform: rotate(-90deg);
			transform-origin: center;
			font-size: 6px;
			text-align: center;
			vertical-align: middle;
			margin: 0;
			width: 21px;
			height: 21px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	&:hover {
		border-color: transparent;
		color: var(--wp--preset--color--primary-darken);
	}
}

/* bouton readmore */
.readmore {
	font-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-family: var(--wp--preset--font-family--secondary);
	display: flex;
	align-items: center;
	text-decoration: none;

	&:hover {
		cursor: pointer;
	}

	&:after {
		content: '\e803';
		font-family: 'demeurance';
		font-size: 8px;
		font-weight: normal;
		margin-left: 5px;
	}

	&.open {
		&:after {
			transform: rotate(180deg);
		}
	}
}

/* outline white */
.button-outline-small-white {
	font-weight: bold;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	color: #fff;
	background-color: transparent;
	border: solid 1px #fff;
	border-radius: 5px;
	padding: 8px 14px;
	text-align: center;
	transition: all 0.3s ease-in-out;
	line-height: 1;

	i {
		margin-right: 5px;

		@media(width < 768px) {
			margin-right: 0;
		}
	}

	&:hover {
		cursor: pointer;
		background-color: rgba(255, 255, 255, 0.4);
	}

	@media(width < 768px) {
		background-color: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(14px);
		padding: 8px 5px;

		span {
			display: none;
		}
	}
}


.moreFilters,
.reset {
	background: transparent;
	border: none;
	padding: 0;
	outline: none;
	font-weight: 500;
	text-decoration: underline;
	margin-bottom: 8px;

	&:hover {
		cursor: pointer;
	}
}


.add_to_favoris {
	margin-bottom: auto;
	margin-left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;

	&:hover {
		i {
			transform: scale(1.2);
		}
	}

	&:not(.button-outline-small-white) {
		border-radius: 50%;
		width: 30px;
		height: 30px;
		padding: 0;
		background-color: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(5px);
		border: none;

		i {
			margin: 0;
			color: #EB3B61;
			transition: all 300ms ease-in-out;
		}

		span {
			display: none;
		}
	}
}