@use "../../shared/styles/align";
// Hide the link if an iframe got appended to the container.
.eventbrite__direct-link:not(:only-child) {
	display: none;
}

// Make sure the widget embed container is always as tall as the
// default/minimum value set by Eventbrite (425px), by overriding the
// container's inline height (set by Eventbrite, sometimes incorrectly
// as 0px), and setting the default height directly to the iframe.
.wp-block-jetpack-eventbrite--embed {
	height: auto !important;

	iframe {
		height: 425px;
	}

	&.aligncenter {
		text-align: center;
	}
}

.eventbrite__lightbox {
	background: rgba(57, 54, 79, 0.8);
}

.eventbrite__lighbox-inside {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 660px) {

	.eventbrite__lighbox-iframe-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

@media (min-width: 661px) {

	.eventbrite__lighbox-iframe-wrapper {
		width: 95%;
		height: 95%;
		max-width: 1080px;
		max-height: 720px;
		margin: auto;
		position: relative;
	}
}

.eventbrite__lighbox-iframe {
	margin: 0;
}

.eventbrite__lighbox-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;

	/* @todo More styling could be copied from Eventbrite */
}

.wp-block-jetpack-eventbrite {

	.wp-block-jetpack-button {

		@include align.align-block;
	}
}
