/**
 * The video-trigger button — interim.
 *
 * Once a hero is converted from the #play modal to the inline player its button
 * carries is-style-video-trigger, and the styling for that lives in global.css,
 * which is part of the refresh and not deployed. Without it the button falls
 * back to the theme's default: dark, and 61px tall rather than 47px.
 *
 * These rules are lifted verbatim from global.css so the two cannot drift.
 * Delete this file, and its enqueue in the mu-plugin, when global.css ships.
 *
 * The .vimeo-content scoping matters: inside a hero the button is white on the
 * photograph, while the in-column variant elsewhere keeps its own dark treatment.
 */

.is-style-video-trigger .wp-block-button__link {
	height: 47px;
	padding: 0 24px;
	background: transparent;
	background-color: transparent !important;
	border-color: #162224 !important;
	color: #162224 !important;
}

.is-style-video-trigger .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 17px;
	margin-left: 4px;
	background-color: #162224;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='17' viewBox='0 0 24 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1420_3122)'%3E%3Cpath d='M24 8.60054C16.9445-1.87644 8.45808-3.68377-3.8147e-06 8.24046C5.07202 16.9101 14.1747 22.4291 24 8.60054ZM21.4286 8.52437C15.4357 17.5541 8.32349 17.5403 2.4085 8.49668C8.43683-0.546909 15.4711-0.533059 21.4286 8.52437Z' fill='%23000'/%3E%3Cpath d='M11.8299 3.67005C14.4651 3.69082 16.6823 5.85131 16.739 8.44113 16.7956 11.1833 14.4934 13.4684 11.6953 13.4407 9.04593 13.413 6.82869 11.2664 6.77202 8.66272 6.70827 5.93441 9.03176 3.64235 11.837 3.67005H11.8299ZM11.7236 10.7678C12.9916 10.7817 14.0329 9.74988 14.0046 8.50345 13.9834 7.32626 12.9775 6.34988 11.7803 6.34296 10.5123 6.32911 9.46388 7.36781 9.48513 8.60732 9.51346 9.78451 10.5123 10.7609 11.7165 10.7678H11.7236Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1420_3122'%3E%3Crect width='24' height='17' fill='white' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='24' height='17' viewBox='0 0 24 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1420_3122)'%3E%3Cpath d='M24 8.60054C16.9445-1.87644 8.45808-3.68377-3.8147e-06 8.24046C5.07202 16.9101 14.1747 22.4291 24 8.60054ZM21.4286 8.52437C15.4357 17.5541 8.32349 17.5403 2.4085 8.49668C8.43683-0.546909 15.4711-0.533059 21.4286 8.52437Z' fill='%23000'/%3E%3Cpath d='M11.8299 3.67005C14.4651 3.69082 16.6823 5.85131 16.739 8.44113 16.7956 11.1833 14.4934 13.4684 11.6953 13.4407 9.04593 13.413 6.82869 11.2664 6.77202 8.66272 6.70827 5.93441 9.03176 3.64235 11.837 3.67005H11.8299ZM11.7236 10.7678C12.9916 10.7817 14.0329 9.74988 14.0046 8.50345 13.9834 7.32626 12.9775 6.34988 11.7803 6.34296 10.5123 6.32911 9.46388 7.36781 9.48513 8.60732 9.51346 9.78451 10.5123 10.7609 11.7165 10.7678H11.7236Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1420_3122'%3E%3Crect width='24' height='17' fill='white' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background-color .3s;
	vertical-align: middle;
}

.is-style-video-trigger .wp-block-button__link:hover::after {
	background-color: #162224;
}

.is-style-video-trigger .wp-block-button__link svg {
	display: none;
}

.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link,
.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link:visited {
	background-color: transparent !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	transition: background-color 0.3s ease, color 0.3s ease !important;
}

.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link:hover,
.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link:focus {
	background-color: #fff !important;
	color: #162224 !important;
	border-color: #fff !important;
}

.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link:hover::after,
.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link:focus::after {
	background-color: #162224 !important;
}

/* The eye is a masked ::after, so its colour is a background-color. Inside a
   hero it has to follow the white text rather than the default dark. */

.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link::after {
	background-color: #fff !important;
}

.vimeo-content .wp-block-button.is-style-video-trigger .wp-block-button__link svg path {
	fill: #fff !important;
}