/*
 * What WordPress needs on top of the old site's styles (base.css, site.css): room for the
 * toolbar when logged in, and the form messages' animation, which ng-zorro did in script.
 */

/* The fixed header and mobile menu sit below WordPress's toolbar, whose height the theme sets (admin.css) */
.admin-bar .header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 1279px) {
	.admin-bar .navbar {
		top: var(--wp-admin--admin-bar--height, 32px);
	}

	.admin-bar .mobile-nav-hide {
		top: calc(var(--wp-admin--admin-bar--height, 32px) + 20px);
	}
}

/* Form messages slide in from the top and fold away, as ng-zorro's did */
.ant-message-notice.nh-enter {
	animation: nh-message-in 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
}

.ant-message-notice.nh-leave {
	animation: nh-message-out 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) forwards;
}

@keyframes nh-message-in {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes nh-message-out {
	0% {
		max-height: 150px;
		padding: 8px;
		opacity: 1;
	}

	100% {
		max-height: 0;
		padding: 0;
		opacity: 0;
	}
}

/* In the editor's page frame, block outlines and other highlights in the admin's navy
   (admin-colors.scss), as WordPress does for its own colour schemes */
body.admin-color-namheng {
	--wp-admin-theme-color: #00174d;
	--wp-admin-theme-color--rgb: 0, 23, 77;
	--wp-admin-theme-color-darker-10: #002680;
	--wp-admin-theme-color-darker-10--rgb: 0, 38, 128;
	--wp-admin-theme-color-darker-20: #0036b3;
	--wp-admin-theme-color-darker-20--rgb: 0, 54, 179;
}

/* In the editor, the header sits at the top on a dark background, so its white links can be read
   and it covers nothing */
.editor-styles-wrapper .header {
	position: relative;
	background: #364d59;
}