@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

.jetpack-lightbox__modal {
	padding: 0;
	border-radius: 8px;
	width: 85%;
	height: auto;
	background-color: var( --studio-white );
	transition: all 0.25s ease;
	font-family: Inter, $sans;
	max-width: 1080px;
	max-height: 100%;

	@media ( prefers-reduced-motion: no-preference ) {
		transform: translateY( 20px );
	}

	&.ReactModal__Content--after-open {
		transform: translateY( 0 );
	}

	p {
		margin-bottom: 0.5rem;
	}

	:is( .button[disabled], .button:disabled, .button.disabled ) {
		background-color: var( --studio-gray-5 );
	}
}

.jetpack-lightbox__modal-overlay {
	background-color: transparent;
	align-items: center;
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	transition: background-color 0.35s ease-out;
	z-index: 100200;
	box-sizing: border-box;

	&.ReactModal__Overlay--after-open {
		background-color: rgb( 0 0 0 / 70% );
		max-height: 100vh;
		overflow-y: auto;
	}
}

.jetpack-lightbox__content-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: auto;
	position: relative;
}

.jetpack-lightbox__content-main {
	padding: 40px;
	height: 100%;
	width: 60%;
	overflow-y: auto;
	background-color: var( --studio-white );
	border-radius: 8px 0 0 8px;
	max-height: 85vh;

	hr {
		margin: 0.75rem 0;
	}
}

.jetpack-lightbox__content-aside {
	padding: 40px;
	width: 40%;
	background-color: var( --studio-gray-0 );
	border-radius: 0 8px 8px 0;
	box-shadow: 0 4px 8px rgb( 0 0 0 / 30% );
	overflow-y: auto;
	max-height: 85vh;

	@include break-medium {
		box-shadow: none;
	}

	@media ( max-width: $break-large ) {
		padding: 24px;
	}
}

.jetpack-lightbox__content-footer {
	background-color: var( --studio-white );
	border-block-start: 1px solid var( --studio-gray-0 );
	margin: 0 -40px 40px;
	padding: 16px 40px;

	@include break-medium {
		margin: 0 -40px -40px;
		position: sticky;
		bottom: -40px;
	}
}

.jetpack-lightbox__close-button {
	position: absolute;
	right: 1rem;
	top: 1rem;
	cursor: pointer;
	transition: scale 0.2s ease-in;

	&:hover {
		scale: 1.2;
	}
}

@media screen and ( max-width: $break-medium ) and ( orientation: portrait ) {
	.jetpack-lightbox__modal {
		display: flex;
		justify-content: center;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		border-radius: 0;
		width: 100%;
		height: 100%;
	}

	.jetpack-lightbox__content-wrapper {
		padding: 0;
		flex-direction: column;
		overflow: hidden;
	}

	.jetpack-lightbox__content-main {
		padding: 24px;
		width: auto;
		max-height: 100%;
	}

	.jetpack-lightbox__content-aside {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 0;
		padding: 24px;
		box-sizing: border-box;
		transition: transform 0.2s;
		transform: translateY( 100% );
		max-height: 100%;

		&.is-expanded {
			transform: translateY( 0 );
		}
	}

	.jetpack-lightbox__close-button {
		z-index: 1;
		background-color: var( --studio-white );
	}
}

@media screen and ( max-height: 630px ) and ( orientation: landscape ) {
	.jetpack-lightbox__modal {
		display: flex;
		border-radius: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
	}

	.jetpack-lightbox__content-main {
		padding: 24px;
		height: auto;
	}
}

@media screen and ( max-height: 365px ) and ( orientation: landscape ) {
	.jetpack-lightbox__content-aside {
		padding: 1.5rem;
		background: var( --studio-gray-0 );
	}
}

.jetpack-lightbox__html--is-open.lightbox-mode .layout__content {
	overflow-y: scroll;
}
