@import "@wordpress/base-styles/breakpoints";
@import "@automattic/typography/styles/variables";

$blueberry-color: #3858e9;

.message-display {
	color: #fff;
	padding-top: 40px;
	background: linear-gradient(180deg, var(--studio-gray-100) 25.44%, rgba(16, 21, 23, 0) 100%), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPC9zdmc+Cg==) repeat, var(--studio-gray-100);

	a {
		color: $blueberry-color;

		&:hover {
			color: darken($blueberry-color, 10%);
			text-decoration: underline;
		}

		&.is-primary {
			color: #fff;
			background-color: $blueberry-color;
			border-radius: 4px;

			&:hover:not(:disabled),
			&:active:not(:disabled),
			&:focus:not(:disabled) {
				background-color: darken($blueberry-color, 10%);
				border-color: darken($blueberry-color, 10%);
				box-shadow: none;
			}
		}
	}

	p {
		margin: 0;
	}

	.l-block-wrapper {
		height: 100%;
		max-width: 1056px;
	}

	.message-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 64px;
		min-height: 700px;
		max-width: 560px;

		.main-message {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 16px;

			&.error {
				border-radius: 4px;
				border: 1px solid var(--studio-red-70);
				background-color: var(--studio-red-70);
				padding: 16px;
				padding-left: 52px;
				position: relative;
				max-width: 528px;
				box-sizing: border-box;

				.gridicon {
					position: absolute;
					top: 16px;
					left: 16px;
				}

				.cta-button {
					margin: 0;
				}
			}

			.title {
				font-family: $brand-serif;
				font-size: $font-headline-medium;
				line-height: $font-headline-large;
				color: #fff;
			}

			.message {
				font-size: $font-body;
				line-height: $font-title-medium;

				strong {
					font-weight: 500;
				}
			}

			.cta-button {
				margin-top: 16px;
				font-size: $font-body-small;
				line-height: $font-title-small;
				padding: 20px;
			}
		}

		.secondary-message {
			font-size: $font-body-small;
			line-height: $font-title-small;
			color: var(--studio-gray-20);
		}
	}
}
