@use "../../scss/mixins/breakpoints";
@use "../../scss/variables/colors";
@use "../../scss/functions/rem";

.jp-dialogue-modern-full__container {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000; // to sit over other elements
	background: rgba(colors.$gray-light, 0.95);
	padding: 1rem 0 0 0;
	height: 100%;
	overflow: auto;

	@include breakpoints.breakpoint( ">960px" ) {
		padding: 2rem;
		left: 160px;
	}
}

body.jp-dialogue-modern-showing {
	overflow: hidden;
}

.jp-dialogue-modern {
	max-width: rem.convert(300px);
	margin: rem.convert(32px) auto;
	overflow: hidden;
	position: relative;
	background-color: #fff;
	box-shadow: 0 5px 24px 0 rgba(0, 0, 0, 0.13);

	p {
		font-size: rem.convert(16px);
		color: #000;
		text-align: left;
	}

	img {
		text-align: center;
		max-width: 100%;
	}

	li {
		text-align: left;
		list-style: disc outside none;
		margin: rem.convert(16px);
		font-size: rem.convert(16px);
		color: #000;
	}

	p + img {
		margin: rem.convert(32px) 0 rem.convert(16px);
	}

	.dops-card {
		margin-bottom: 0;
	}

	.jp-dialogue-modern-card__below {
		text-align: left;
	}

	figure {
		margin: 0;
		margin-bottom: 12px;

		figcaption {
			text-align: center;
		}
	}

	a :not(.wp-block-button__link) {
		text-decoration: underline;
	}
}

.jp-dialogue-modern-full__dismiss {
	cursor: pointer;
	position: absolute;
	right: -16px;
	top: -16px;
	fill: #2c3338; // TODO: $studio-gray-80
	padding: rem.convert(16px);
	height: rem.convert(32px);
	width: rem.convert(32px);
}

.jp-dialogue-modern.has-featured-image .jp-dialogue-modern-full__dismiss {
	fill: #dcdcde;
}

h1.jp-dialogue-modern__title {
	font-weight: 600;
	text-align: left;
	font-size: rem.convert(24px);
	margin: 0 0 rem.convert(32px) 0;
}

.jp-dialogue-modern__content {
	background: #fff;
	padding: 32px 32px;
}

.jp-dialogue-modern__cta-container {
	text-align: center;
	// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
	line-height: 200%;
	padding: rem.convert(8px) 0 0;

	.dops-button {
		margin: 0 rem.convert(8px);
	}
}

/** legacy classes below this point **/

.jp-dialogue-modern__note,
a.jp-dialogue-modern__note {
	margin: 0;
	padding: rem.convert(16px) 0 0;
	font-size: rem.convert(14px);
	clear: both;
	font-style: italic;
}

// Planet + star svgs for decoration only
.jp-dialogue-modern-full__svg-jupiter {
	position: absolute;
	right: 0;
	top: rem.convert(80px);
	opacity: 0.9;
}

.jp-dialogue-modern-full__svg-stars {
	position: absolute;
	left: rem.convert(100px);
	top: rem.convert(100px);
	opacity: 0.9;
}
