@import '@automattic/typography/styles/variables';

.modal-survey-notice {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;

	.modal-survey-notice__backdrop {
		background: var( --studio-black );
		opacity: 0.2;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: 100%;
		height: 100%;
		cursor: default;
	}

	.modal-survey-notice__popup {
		position: absolute;
		inset-block-end: 32px;
		inset-inline-end: 32px;
		width: 430px;
		max-width: calc( 100% - 50px );
		z-index: 2;
		border-radius: 8px;
		box-shadow:
			0 5px 15px 0 rgba( 0, 0, 0, 0.08 ),
			0 15px 27px 0 rgba( 0, 0, 0, 0.07 ),
			0 30px 36px 0 rgba( 0, 0, 0, 0.04 ),
			0 50px 43px 0 rgba( 0, 0, 0, 0.02 );
		overflow: hidden;

		.modal-survey-notice__popup-head {
			background: #0675c4;
			border-bottom: 1px solid #f6f7f7;
			height: 56px;
			padding: 0 14px 0 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.modal-survey-notice__popup-head-title {
				color: var( --studio-white );
				font-size: rem( 13px );
				font-weight: 500;
				line-height: 20px;
			}
		}

		.modal-survey-notice__popup-head-close svg {
			fill: var( --studio-white );
		}

		> .modal-survey-notice__popup-head-close {
			padding: 8px;
			position: absolute;
			inset-block-start: 4px;
			inset-inline-end: 0;
			z-index: 1;
		}

		.modal-survey-notice__popup-img {
			background: var( --color-accent );
			height: 270px;
			overflow: hidden;
			position: relative;

			img {
				display: block;
				inset-block-start: 42px;
				inset-inline-start: 32px;
				position: absolute;
				width: 100%;
			}
		}

		.modal-survey-notice__popup-content {
			padding: 24px 32px;
			background: var( --studio-white );

			.modal-survey-notice__popup-content-title {
				font-size: $font-title-small;
				font-weight: 500;
				line-height: 24px;
				margin-bottom: 16px;
				text-wrap: balance;
			}

			.modal-survey-notice__popup-content-description {
				font-size: rem( 13px );
				line-height: 20px;
				margin-bottom: 16px;
				text-wrap: pretty;
			}

			.modal-survey-notice__popup-content-buttons {
				display: flex;
				gap: 8px;
				justify-content: flex-end;
			}
		}
	}
}
