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

.wpcom-block-editor-nux-modal {
	.components-modal__header {
		height: auto;
		padding: 10px;
		border-bottom: 0;

		// Fix styles when Gutenberg is deactivated
		position: absolute;
		left: 0;
		right: 0;
		margin: 0;
		background-color: transparent;

		button {
			left: unset;

			svg path {
				transform: scale(1.4);
				transform-origin: center;
			}
		}
	}

	.components-modal__content {
		padding: 84px 20px 20px;
		margin-top: 0;

		&::before {
			margin: 0;
		}

		@include break-mobile {
			text-align: center;
		}
	}

	.wpcom-block-editor-nux-modal__image-container {
		display: flex;
		justify-content: center;
	}

	.wpcom-block-editor-nux-modal__title {
		margin: 34px 0 0;
		font-size: $font-headline-small;
		font-weight: 500;
		line-height: 1.2;

		@include break-mobile {
			margin-top: 24px;
		}
	}

	.wpcom-block-editor-nux-modal__description {
		max-width: 352px;
		margin: 16px 0 0;
		font-size: $font-body;

		@include break-mobile {
			margin: 20px auto 0;
			font-size: $font-body-large;
		}
	}

	.wpcom-block-editor-nux-modal__buttons {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 24px;

		.components-button {
			min-width: 130px;
			height: 40px;
			justify-content: center;
			border-radius: 3px;
			font-size: $font-body-small;
		}

		.components-button + .components-button {
			margin-top: 12px;
		}

		@include break-mobile {
			flex-direction: row;
			margin-top: 28px;

			.components-button + .components-button {
				margin-top: 0;
				margin-left: 16px;
			}
		}
	}
}