path: root/css/navBar.scss

#navBar {
	box-shadow:       $shadow;
	color:            var(--textColour);
	display:          flex;
	gap:              1rem;
	left:             0;
	min-height:       calc(100vh + 1rem);
	padding:          1rem;
	position:         absolute;
	transform:        translateX(-100%);
	transition:       transform $navBarSlideDuration;
	z-index:          127;

	&[data-state = "Visible"] {
		transform: translateX(0);
	}

	p.clickable, a {
		color:                 var(--textColour);
		cursor:                pointer;
		display:               block;
		font-weight:           bold;
		text-decoration:       underline;
		text-decoration-color: #00000000;
		transition:            text-decoration-color 0.125s;

		&:hover {
			text-decoration-color: var(--textColour);
		}
	}

	section {
		display:        flex;
		flex-direction: column;
		gap:            0.5em;

		p.heading {
			text-align: center;

			&::after {
				background-color: var(--textColour);
				border-radius:    0.25rem;
				content:          "";
				display:          block;
				height:           0.25rem;
				margin-top:       0.5rem;
				width:            100%;
			}
		}
	}

	#themeToggler {
		bottom:    2rem;
		position:  absolute;
		left:      50%;
		transform: translateX(-50%);
	}

	@media (pointer: fine) {
		backdrop-filter:  blur(1rem);
		background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
		padding-top:      4rem;

		@media (orientation: landscape) {
			border-bottom-right-radius: 1rem;
			border-top-right-radius:    1rem;
			width:                      50%;
		}

		@media (orientation: portrait) {
			width: 100%;
		}
	}

	@media (pointer: coarse) {
		background-color: var(--backgroundColour);
		flex-direction:   column;
		font-size:        4rem;
		padding-top:      6rem;
		width:            100%;


		p.clickable, a {
			text-align: center;
		}

		p.heading::before {
			background-color: var(--textColour);
			border-radius:    0.25rem;
			content:          "";
			display:          block;
			height:           0.25rem;
			margin-bottom:    0.5rem;
			width:            100%;
		}
	}
}