// This is needed so ExternalLinks appear correctly. Should be part of 'wp-components' style but for some reason it's not.
@import '@wordpress/components/src/visually-hidden/style';

#woocommerce-admin-print-label {
	.postbox-header {
		display: none;
	}

	min-height: 100px;

	.hndle,
	.handlediv {
		display: none;
	}

	.wc-admin-shipping-banner-container {
		display: flex;
		align-items: center;
		margin-top: 18px;
		margin-bottom: 6px;
	}

	.wc-admin-shipping-banner-illustration {
		margin-right: 8px;
	}

	.wc-admin-shipping-banner-blob {
		margin-right: 8px;
	}

	h3 {
		margin: 0;
		font-size: 1.15em;
	}

	p {
		margin: 0;
		font-size: 15px;
		line-height: 19px;
	}

	.components-button.is-primary {
		margin: 10px 61px 10px auto;
		padding: 0 30px;
		font-size: 14px;
		font-weight: 500;
		line-height: 25px;
		text-decoration: none;
		text-shadow: none;
		overflow: visible;
	}

	.notice-dismiss {
		top: 14px;
		right: 18px;
	}

	.wc-admin-shipping-banner-install-error {
		color: #d63638;
		> .warning-icon {
			margin-right: 3px;
			vertical-align: middle;
			margin-top: -2px;
			path {
				fill: #d63638;
			}
		}
	}
	.components-external-link__icon {
		display: none;
	}
}

.components-modal__frame.wc-admin-shipping-banner__dismiss-modal {
	width: 500px;
	max-width: 100%;

	.components-modal__header {
		border-bottom: 0;
		margin: 4px 0;
		padding: 0;
		height: 50px;
		.components-button.has-icon {
			left: 15px;
			svg {
				width: 30px;
				height: 30px;
			}
		}
	}

	.components-modal__header-heading {
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		line-height: 32px;
	}

	.wc-admin-shipping-banner__dismiss-modal-help-text {
		font-size: 16px;
		line-height: 24px;
		margin: 0 60px 1em 0;
	}

	.wc-admin-shipping-banner__dismiss-modal-actions {
		text-align: right;

		.components-button.is-primary {
			height: 30px;
			padding-left: 15px;
			padding-right: 15px;
			text-align: center;
			font-size: 14px;
			line-height: 15px;
			font-weight: 500;
			align-items: center;
			margin-left: 10px;
		}

		button.is-primary {
			align-self: flex-end;
		}
	}
}

@media (max-width: 1080px) {
	#woocommerce-admin-print-label {
		text-align: center;

		.wc-admin-shipping-banner-container {
			flex-wrap: wrap;
			justify-content: center;
		}
		.components-button.is-primary {
			margin: 10px 0 0 0;
		}
		p {
			margin: 5px 15px;
			max-width: initial;
		}
		h3 {
			margin-top: 10px;
		}
	}
}

.notice.wcs-nux__notice {
	display: none;
}

.wc-admin-shipping-banner__dismiss-modal {
	.components-button {
		span {
			display: none;
		}
	}
}