@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

$video-pink: #f5baff;
$video-blue: #002d3e;
$video-green: #0e5837;
$announcement-blue: #032836;
$dark-golden-beige: #d8a55f;

.agency-tier-celebration-modal {
	&.a4a-themed-modal .components-modal__content.hide-header {
		padding: 0;
	}

	&.emerging-partner{

		&.a4a-themed-modal .components-modal__content.hide-header {
			background: $video-pink;
		}
	}

	&.agency-partner {

		&.a4a-themed-modal .components-modal__content.hide-header {
			background: $video-blue;
		}
	}

	&.pro-agency-partner {
		&.a4a-themed-modal .components-modal__content.hide-header {
			background: $video-green;
		}
	}

	&.announcement-modal {
		&.a4a-themed-modal .components-modal__content.hide-header {
			background: $announcement-blue;
		}

		.a4a-themed-modal__sidebar-image {
			width: auto;
		}
	}

	&.is-narrow-view {
		display: block;
		border-radius: 0;

		.a4a-themed-modal__wrapper {
			flex-direction: column;
		}

		.a4a-themed-modal__sidebar-image {
			// Make sure to update the IMAGE_HEIGHT in the index.tsx file when changing the height
			height: 260px;
		}

		.a4a-themed-modal__content {
			margin: -2px 0;
			// Make sure to update the BLOCK_PADDING in the index.tsx file when changing the padding
			padding: 48px 0 48px 32px;
			border-radius: 4px 4px 0 0;
		}

		&.a4a-themed-modal {
			min-height: 100vh;

			.components-modal__content.hide-header {
				border-radius: 0;
				overflow: hidden;
			}
		}
		.agency-tier-celebration-modal__footer {
			position: absolute;
			inset-block-end: 16px;
			width: 100%;
			background: var(--color-text-white);
			padding-inline: 32px;
			left: 0;

			.components-button {
				width: 100%;
			}
		}

		&.agency-partner, &.pro-agency-partner, &.announcement-modal {
			.a4a-themed-modal__dismiss-button {
				fill: var(--color-text-white);
			}
		}
	}

	.a4a-themed-modal__content {
		margin: 8px;
		display: flex;
		flex-direction: column;
		padding-block-end: 16px;
		padding-inline-end: 0;
		z-index: 1; // Place modal content above the overlapping video on Safari
	}

	.a4a-themed-modal__sidebar-image-container {
		min-width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	&.premier-partner {
		.a4a-themed-modal__sidebar-image {
			width: 370px;
		}

		&.a4a-themed-modal .components-modal__content.hide-header {
			background: $dark-golden-beige;
		}
	}
}

.agency-tier-celebration-modal__content-wrapper {
	position: relative;
}

.agency-tier-celebration-modal__content {
	display: flex;
	gap: 16px;
	flex-direction: column;
	overflow-y: auto;
	padding-inline-end: 32px;

	a.components-button {
		margin-block-start: 8px;
		width: fit-content;
	}
}

.agency-tier-celebration-modal__title {
	@include heading-x-large;
	text-wrap: balance;
}

.agency-tier-celebration-modal__description,
.agency-tier-celebration-modal__extra-description {
	@include body-medium;
}

.agency-tier-celebration-modal__benefits {
	display: grid;
	gap: 4px;
	margin: 0 0 0 0.8rem;
	list-style-image: url(calypso/assets/images/a8c-for-agencies/agency-tier/check-icon.svg);

	li {
		@include body-medium;
		padding-inline-start: 8px;
		margin-inline-start: 4px;
	}
}

.agency-tier-celebration-modal__scroll-indicator {
	position: absolute;
	inset-block-end: 15px;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 50px;
	background: linear-gradient(180deg, #0000 0, #fff);
	opacity: 0;
	transition: opacity 0.3s ease;

	&.is-overflowing  {
		opacity: 1; /* Show the gradient background when the list overflows */
	}
}
