#header {
	position: relative;
	z-index: 50;
}

// transparent state
[data-device] {
	position: relative;
	// z-index: 10;
}

@include media-breakpoint-down(md) {
	[data-device='mobile'][data-transparent] {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

@include media-breakpoint-up(lg) {
	[data-device='desktop'][data-transparent] {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

// sticky state
[data-device] {
	min-height: var(--minHeight, 0);
}

.ct-sticky-container {
	min-height: var(--minHeight, 0);

	[data-sticky*='yes'] {
		[data-row*='middle'] {
			--main-row-height: var(--height);
		}

		&[data-sticky*='shrink'] {
			[data-row*='middle'] > * {
				--height: var(--shrinkHeight, var(--main-row-height));
			}
		}

		&[data-sticky*='auto-hide'],
		&[data-sticky*='slide'],
		&[data-sticky*='fade'] {
			[data-row*='middle'] > * {
				--height: calc(
					var(--main-row-height) * var(--stickyShrink, 100) / 100
				);
			}
		}
	}
}

[data-sticky*='yes'] {
	position: fixed;
	top: calc(var(--admin-bar, 0px) + var(--frame-size, 0px));
	left: var(--frame-size, 0px);
	right: var(--frame-size, 0px);
	z-index: 5;
}

[data-sticky*='auto-hide'],
[data-sticky*='slide'] {
	&[data-sticky*='yes-start'] {
		transform: translateY(-100%);
	}

	&[data-sticky*='yes-end'] {
		transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	&[data-sticky*='yes-hide-start'] {
		transform: none;
	}

	&[data-sticky*='yes-hide-end'] {
		transform: translateY(-100%);
		transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
}

[data-sticky*='fade'] {
	&[data-sticky*='yes-start'] {
		opacity: 0;
	}

	&[data-sticky*='yes-end'] {
		transition: opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	&[data-sticky*='yes-hide-start'] {
		opacity: 1;
	}

	&[data-sticky*='yes-hide-end'] {
		opacity: 0;
		transition: opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
}

// sticky transitions
body:not(.ct-loading) {
	[data-sticky] {
		> [data-row] {
			transition: box-shadow 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955),
				background-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		[data-column] {
			transition: min-height 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		.ct-header-text,
		.site-description {
			transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}
	}
}