/**
 * Modal
 */

@use "../../../../packages/colors/colors.module" as colors;

.newspack-modal {
	// Color
	--wp-admin-theme-color: #{colors.$primary-600};
	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};

	@media screen and ( min-width: 744px ) {
		max-width: 680px;
		width: 680px;

		&--wide {
			max-width: 1168px;
			width: 1168px;
		}
	}

	&--narrow {
		max-width: 360px;
		width: 360px;
	}

	&--hide-title {
		.components-modal__header {
			display: none;
		}

		.components-modal__content {
			margin-top: 0;
			padding-top: 32px;
		}
	}

	@media screen and ( min-width: 960px ) {
		max-height: calc(100% - 128px);
	}

	// Links
	a {
		color: var(--wp-admin-theme-color);

		&:active,
		&:focus,
		&:hover {
			color: var(--wp-admin-theme-color-darker-10);
		}

		&:focus {
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
			outline: 3px solid transparent;
		}
	}

	.components-modal__content {
		> *:last-child {
			margin-bottom: 0;
		}
	}
}
