path: root/css/navBar.scss

#navBar {
	backdrop-filter:  blur(1rem);
	background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
	box-shadow:       $shadow;
	color:            var(--textColour);
	display:          flex;
	gap:              1rem;
	left:             0;
	min-height:       calc(100vh + 1rem);
	padding:          1rem;
	padding-top:      4rem;
	position:         absolute;
	transform:        translateX(-100%);
	transition:       transform $navBarSlideDuration;
	width:            50%;
	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 (orientation: landscape) {
		border-bottom-right-radius: 1rem;
		border-top-right-radius:    1rem;
	}

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