.embedvideo {
	&-consent {
		.hidden {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
	}

	&-thumbnail {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;

		&__image {
			width: inherit;
			height: inherit;
			object-fit: cover;
		}

		// When thumbnail presents, change overlay styles
		+ .embedvideo-overlay {
			.embedvideo-loader {
				color: #eaecf0;

				&__title {
					background: linear-gradient( to bottom, #000000, 40%, transparent );
				}
			}
		}
	}

	&-overlay {
		color: #54595d;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 0.875rem;
		user-select: none;

		> div {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transition: opacity 250ms ease;
		}
	}

	&-loader {
		display: grid;
		cursor: pointer;

		&__title {
			padding: 0.75rem;
			text-align: start;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;

		  a {
			color: #eaecf0;

			&:hover {
			  color: #fff;
			}
		  }
		}

		&__fakeButton {
			place-self: center;
			padding: 0.5rem 1rem;
			color: #fff;
			background-color: rgba( 0, 0, 0, 60% );
			border-radius: 1000px;
			cursor: pointer;
			transition: background-color 250ms ease;
		}

		&__footer {
			align-self: end;
			display: flex;
			padding: 0.5rem;
			font-size: 0.8125rem;
			justify-content: space-between;

			> div {
				padding: 0.25rem 0.5rem;
				border-radius: 0.25rem;
				background-color: rgba( 0, 0, 0, 60% );
				color: #eaecf0;
			}
		}

		&__title,
		&__footer {
			left: 0;
			right: 0;
			font-weight: bold;
			transition: opacity 250ms ease;
		}

		&__title,
		&__fakeButton,
		&__footer {
			position: absolute;
		}

		&:hover {
			.embedvideo-loader {
				&__title,
				&__footer {
					//opacity: 0;
				}

				&__fakeButton {
					background-color: #36c;
				}
			}
		}
	}

	&-privacyNotice {
		padding: 1rem;
		display: flex;
    	flex-direction: column;
    	justify-content: center;
		gap: 0.5rem;
		background-color: rgba( 0, 0, 0, 0.6 );
		color: #eaecf0;
		text-align: center;

		&__link {
			color: #eaf3ff;
			text-decoration: underline;
		}

		&__buttons {
			> button {
				appearance: none;
				padding: 0.5rem 1rem;
				border: 0;
				border-radius: 1000px;
				color: #fff;
				font-size: inherit;
				cursor: pointer;
			}
		}

		&__continue {
			background-color: #36c;

			&:hover {
				background-color: #447ff5;
			}

			&:active {
				background-color: #2a4b8d;
			}
		}

		&__dismiss {
			background-color: transparent;

			&:hover {
				color: #d33;
			}

			&:active {
				color: #b32424;
			}
		}
	}
}

[data-service="local-embed"] .embedvideo-consent {
	background-color: transparent;
}

.center .floatnone > .embedvideo {
	margin: 0 auto;
}