@charset "UTF-8";

/**
 * Global button styles.
 *
 * @package museegodf
 * @author  Grégoire Noyelle
 * @license GPL-2.0-or-later
 * @link    https://www.gregoirenoyelle.com/
 */

/* Hover — all buttons */
.wp-block-button__link:hover {
	opacity: 0.70;
	transition: var(--wp--custom--transition--link);
}

/* Base layout — right icons */
[class*="-arrow-right"] .wp-block-button__link,
[class*="-arrow-down"] .wp-block-button__link {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	gap: var(--wp--custom--button--gap);
}

/* Base layout — left icons */
[class*="-time"] .wp-block-button__link,
[class*="-download"] .wp-block-button__link,
[class*="-link"] .wp-block-button__link,
[class*="-info"] .wp-block-button__link,
[class*="-tag"] .wp-block-button__link,
.is-style-post-terms-primary-5-tag span {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start;
	gap: var(--wp--custom--button--gap);
}

/* Shared pseudo-element base — right icons */
[class*="-arrow-right"] .wp-block-button__link::after,
[class*="-arrow-down"] .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
	align-self: center;
}

/* Shared pseudo-element base — left icons */
[class*="-time"] .wp-block-button__link::before,
[class*="-download"] .wp-block-button__link::before,
[class*="-link"] .wp-block-button__link::before,
[class*="-info"] .wp-block-button__link::before,
[class*="-tag"] .wp-block-button__link::before,
.is-style-post-terms-primary-5-tag span::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
	align-self: center;
}

/* Arrow color override — light-arrow-right only */
.is-style-button-light-arrow-right .wp-block-button__link::after {
	background-color: var(--wp--preset--color--tw-primary-3);
}

/* Icon sources — right */
[class*="-arrow-right"] .wp-block-button__link::after {
	-webkit-mask-image: url('../img/icons/arrow-right.svg');
	mask-image: url('../img/icons/arrow-right.svg');
}

[class*="-arrow-down"] .wp-block-button__link::after {
	-webkit-mask-image: url('../img/icons/arrow-down.svg');
	mask-image: url('../img/icons/arrow-down.svg');
	align-self: flex-end;
}

/* Icon sources — left */
[class*="-time"] .wp-block-button__link::before {
	-webkit-mask-image: url('../img/icons/time.svg');
	mask-image: url('../img/icons/time.svg');
}

[class*="-download"] .wp-block-button__link::before {
	-webkit-mask-image: url('../img/icons/download.svg');
	mask-image: url('../img/icons/download.svg');
}

[class*="-link"] .wp-block-button__link::before {
	-webkit-mask-image: url('../img/icons/link.svg');
	mask-image: url('../img/icons/link.svg');
}

[class*="-info"] .wp-block-button__link::before {
	-webkit-mask-image: url('../img/icons/info.svg');
	mask-image: url('../img/icons/info.svg');
}

[class*="-tag"] .wp-block-button__link::before,
.is-style-post-terms-primary-5-tag span::before {
	-webkit-mask-image: url('../img/icons/tag.svg');
	mask-image: url('../img/icons/tag.svg');
}

/**
 * Non-interactive buttons — disable cursor and pointer events
 */

.is-style-button-light-time .wp-block-button__link,
.is-style-button-primary-5-info .wp-block-button__link {
	cursor: default;
	pointer-events: none;
}

/**
 * Query Loop badges — static override of the theme.json style variations.
 *
 * WordPress prints custom block style variation CSS as a per-instance
 * inline stylesheet (see wp-includes/block-supports/block-style-
 * variations.php since WP 6.6). Two problems surface inside this
 * repeating Query Loop: (1) WP Grid Builder's facet reload doesn't carry
 * that stylesheet along when it swaps the loop's inner markup, and
 * (2) WP core itself cross-contaminates the generated per-instance CSS
 * when the same block type repeats with different variations, so some
 * instances render with another variation's colors even on a normal
 * page load. !important on the color/shape properties forces these
 * stable-selector rules to win regardless of load order.
 */

.is-style-button-primary-5-info .wp-block-button__link {
	color: var(--wp--preset--color--tw-light) !important;
	background-color: var(--wp--preset--color--tw-primary-5) !important;
	border-color: var(--wp--preset--color--tw-primary-5) !important;
	border-radius: var(--wp--custom--button--radius-pill) !important;
	padding: var(--wp--custom--button--padding-pill-y) var(--wp--custom--button--padding-pill-x);
	font-size: var(--wp--preset--font-size--tw-6);
	font-weight: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.is-style-button-light-time .wp-block-button__link {
	color: var(--wp--preset--color--tw-primary-2) !important;
	background-color: var(--wp--preset--color--tw-primary-4) !important;
	border-color: var(--wp--preset--color--tw-primary-4) !important;
	border-radius: var(--wp--custom--button--radius-pill) !important;
	padding: var(--wp--custom--button--padding-pill-y) var(--wp--custom--button--padding-pill-x);
	font-size: var(--wp--preset--font-size--tw-6);
	font-weight: inherit;
	letter-spacing: 0;
	text-transform: none;
}

/**
 * Post Terms — Primary 5 Tag
 * Pill style matching is-style-button-primary-5-tag
 */

.is-style-post-terms-primary-5-tag {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--button--gap);
}

.is-style-post-terms-primary-5-tag .wp-block-post-terms__separator {
	display: none;
}

.is-style-post-terms-primary-5-tag span {
	color: var(--wp--preset--color--tw-light);
	background-color: var(--wp--preset--color--tw-primary-5);
	border-radius: var(--wp--custom--button--radius-pill);
	padding: var(--wp--custom--button--padding-pill-y) var(--wp--custom--button--padding-pill-x);
	font-size: var(--wp--preset--font-size--tw-6);
	text-decoration: none;
}