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

.wp-block-button .wp-element-button {
	transition: 0.2s all ease-in-out;
	display: inline-block;
}

.wp-block-button .wp-block-button__link:hover {
	/* box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0); */
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cachet-dark-blue);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline>.wp-block-button__link {
	padding: 5px 25px;
}

.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color),
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cachet-dark-blue);
	border-color: var(--wp--preset--color--cachet-dark-blue);
	color: var(--wp--preset--color--white);
}

/* Button - Copper Style
--------------------------------------------- */

.is-style-cachet-copper-button .wp-element-button,
.wp-block.is-style-cachet-copper-button .wp-element-button {
	background: var(--wp--preset--color--cachet-dark-copper);
	border-color: var(--wp--preset--color--cachet-dark-copper);
	color: var(--wp--preset--color--white);
}

.is-style-cachet-copper-button:hover .wp-element-button,
.wp-block.is-style-cachet-copper-button:hover .wp-element-button {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

/* Button - Flag Style
--------------------------------------------- */

.is-style-cachet-flag-button .wp-element-button,
.wp-block.is-style-cachet-flag-button .wp-element-button {
	background: var(--wp--preset--color--cachet-tan);
	border-color: var(--wp--preset--color--cachet-tan);
	color: var(--wp--preset--color--primary);
}

.is-style-cachet-flag-button:hover .wp-element-button,
.wp-block.is-style-cachet-flag-button:hover .wp-element-button {
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2);
}

/* Button - Primary/Copper Arrow Style
--------------------------------------------- */

.is-style-cachet-primary-arrow-button .wp-element-button,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button,
.is-style-cachet-copper-arrow-button .wp-element-button,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button {
	color: white;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	padding: 15px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.is-style-cachet-primary-arrow-button .wp-element-button.has-text-align-left,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button.has-text-align-left,
.is-style-cachet-copper-arrow-button .wp-element-button.has-text-align-left,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button.has-text-align-left {
	justify-content: flex-start;
}
.is-style-cachet-primary-arrow-button .wp-element-button.has-text-align-right,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button.has-text-align-right,
.is-style-cachet-copper-arrow-button .wp-element-button.has-text-align-right,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button.has-text-align-right {
	justify-content: flex-end;
}

.is-style-cachet-primary-arrow-button .wp-element-button,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.is-style-cachet-copper-arrow-button .wp-element-button,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button {
	background: var(--wp--preset--color--cachet-dark-copper);
	border-color: var(--wp--preset--color--cachet-dark-copper);
	color: var(--wp--preset--color--white);
}

.is-style-cachet-primary-arrow-button .wp-element-button::after,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button::after,
.is-style-cachet-copper-arrow-button .wp-element-button::after,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15.21 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m.5.5 14 14-14 14' fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	margin-left: 20px;
	display: inline-block;
	width: 14px;
	height: 21px;
	position: relative;
	z-index: 1;
	transition: 0.2s all ease-in-out;
}

.is-style-cachet-primary-arrow-button .wp-element-button:hover,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button:hover,
.is-style-cachet-copper-arrow-button .wp-element-button:hover,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button:hover {
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.is-style-cachet-primary-arrow-button .wp-element-button:hover::after,
.wp-block.is-style-cachet-primary-arrow-button .wp-element-button:hover::after,
.is-style-cachet-copper-arrow-button .wp-element-button:hover::after,
.wp-block.is-style-cachet-copper-arrow-button .wp-element-button:hover::after {
	transform: translateX(5px);
}


/* Self-Guided Tour Link with Icon */
p.sgt-link a:not(.button):not(.wp-element-button) {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	color: var(--wp--preset--color--secondary);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	text-decoration: underline;
}
p.sgt-link a:not(.button):not(.wp-element-button):hover {
	color: var(--wp--preset--color--cachet-dark-copper);
}
p.sgt-link a:not(.button):not(.wp-element-button)::after {
	content: url('../svg/icon-self-guided-tours.svg');
	display: block;
	width: 28px;
	height: 25px;
}


/* Print QMI Link with Icon */
p.print-qmi-link a:not(.button):not(.wp-element-button) {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	color: var(--wp--preset--color--secondary);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	text-decoration: underline;
}
p.print-qmi-link a:not(.button):not(.wp-element-button):hover {
	color: var(--wp--preset--color--cachet-dark-copper);
}
p.print-qmi-link a:not(.button):not(.wp-element-button)::after {
	content: url('../svg/icon-print.svg');
	display: block;
	width: 18px;
	height: 18px;
}