path: root/css/sideMenu.scss

#sideMenu {
	backdrop-filter:         blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
	background-color:        color-mix(in srgb, var(--backgroundColour), transparent 50%);
	box-shadow:              0 0 1rem color-mix(in srgb, black, transparent 50%);;
	display:                 flex;
	flex-direction:          column;
	gap:                     1rem;
	height:                  calc(100vh - var(--hamburgerWidth) - 3rem);
	justify-content:         space-between;
	left:                    100%;
	overflow:                scroll;
	padding:                 1rem;
	position:                absolute;
	top:                     calc(var(--hamburgerWidth) + 2rem);
	transition:              left $slideDuration;
	width:                   100vw;
	z-index:                 255;

	&.visible {
		left: 0;
	}

	@media (orientation: landscape) and (pointer: fine) {
		border-bottom-left-radius: 1rem;
		border-top-left-radius:    1rem;
		width:                     50vw;

		&.visible {
			left: 50%;
		}
	}

	@media (pointer: coarse) {
		border-style: solid;
		border-width: $separatorWidth;
		font-size:    2em;
	}

	div.links {
		display: flex;
		gap:     1rem;

		@media (pointer: coarse) {
			flex-direction: column;
		}

		section {
			$gap: 0.25rem;

			display:        flex;
			flex-direction: column;
			gap:            $gap;

			p {
				text-align: center;

				&::after {
					background-color: var(--textColour);
					border-radius:    calc($separatorWidth / 2);
					content:          "";
					display:          block;
					height:           $separatorWidth;
					margin-top:       $gap;
					width:            100%;
				}

				@media (pointer: coarse) {
					&::before {
						background-color: var(--textColour);
						border-radius:    calc($separatorWidth / 2);
						content:          "";
						display:          block;
						height:           $separatorWidth;
						margin-top:       $gap;
						width:            100%;
					}
				}
			}
		}
	}

	#themeToggler {
		align-self: center;
	}
}