@use "../variables.scss";

@mixin navigation-button {
	button {
		padding: 0 20px 0 20px;
		&:hover {
			background-color: white;
			& > a { color: black; }
		}
	}
}

@mixin navigation {
	.header-left {
		height: 100%;
		padding: 0 20px 0 20px;
		background-color: rgb(0,0,0);
	}
	.header-right {
		@include navigation-button;

		display: flex;
		height: 100%;
	}
}

@mixin styling {
	@include navigation;

	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100vw;
	height: variables.$header-Y;
	background-color: rgb(10,10,10);
}