:root {
	--nomon-header-fade-transition: 200ms;
}

/* --- Sticky active state --- */

#brx-header.nomon-header-sticky-active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	animation-name: nomon_header_fadein;
	animation-duration: var(--nomon-header-fade-transition);
	animation-iteration-count: 1;
}

#brx-header.nomon-header-sticky-active[data-nomon-scroll="0"] {
	animation-duration: 0ms;
}

.admin-bar #brx-header.nomon-header-sticky-active {
	top: var(--wp-admin--admin-bar--height);
}

@media (max-width: 682px) {
	.admin-bar #brx-header.nomon-header-sticky-active {
		top: 0;
	}
}

/* --- Sticky hidden (fade out, used internally) --- */

#brx-header.nomon-header-sticky-hidden {
	animation-name: nomon_header_fadeout;
	animation-duration: var(--nomon-header-fade-transition);
	animation-iteration-count: 1;
	opacity: 0;
	pointer-events: none;
}

/* --- Hide-on-scroll: slide up --- */

#brx-header.nomon-header-not-pin:not([data-nomon-hide-effect=fade]) {
	transform: translateY(-100%);
}

/* --- Hide-on-scroll: fade --- */

#brx-header.nomon-header-not-pin[data-nomon-hide-effect=fade] {
	animation-name: nomon_header_fadeout;
	animation-duration: var(--nomon-header-fade-transition);
	animation-iteration-count: 1;
	opacity: 0;
	visibility: hidden;
}

/* --- Row visibility in sticky state --- */

#brx-header.nomon-header-sticky-active [data-nomon-sticky=hide] {
	display: none !important;
}

#brx-header:not(.nomon-header-sticky-active) [data-nomon-sticky=show]:not([data-nomon-sticky-active=true]) {
	display: none !important;
}

#brx-header.nomon-header-sticky-active [data-nomon-sticky=show] {
	display: flex;
}

/* --- Headroom transition base --- */

.nomon-header {
	transition-duration: var(--nomon-header-fade-transition);
	transition-property: transform, opacity, visibility;
	transition-timing-function: linear;
}

/* --- Row height transition during scroll --- */

.scrolling .brxe-nomonheaderrow {
	height: var(--nomon-sticky-header-height) !important;
}

/* --- Animations --- */

@keyframes nomon_header_fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes nomon_header_fadeout {
	0% { opacity: 1; }
	100% { opacity: 0; }
}