header {
	// row box-shadow
	[data-row] {
		position: relative;
		box-shadow: var(--boxShadow);
	}

	[data-row="top"] {
		z-index: 3;
	}

	[data-row="middle"] {
		z-index: 2;
	}

	[data-row="bottom"] {
		z-index: 1;
	}


	// border top & bottom
	[data-border] {
		&:before, &:after {
			position: absolute;
			content: '';
			left: 0;
			right: 0;
		}

		&:before {
			top: 0;
			border-top: var(--border);
		}

		&:after {
			bottom: 0;
			border-bottom: var(--border);
		}
	}

	div:not([data-border*="top-full"]):before,
	div:not([data-border*="bottom-full"]):after {
		@include container-width(( width: fixed ));
	}

	[data-border*="top-full"]:before,
	[data-border*="bottom-full"]:after {
		width: 100%;
	}
}