path: root/css/sideMenu.scss

#sideMenu {
	align-items:      center;
	background-color: var(--backgroundColour);
	display:          flex;
	flex-direction:   column;
	gap:              1rem;
	justify-content:  space-between;
	left:             100vw;
	min-height:       calc(100vh + 1rem);
	padding:          1rem;
	padding-bottom:   2rem;
	padding-top:      calc($hamburgerHeight + $gap * 2);
	position:         relative;
	width:            100%;
	z-index:          127;

	body[data-page = "achernar"] & {
		background-color: var(--backgroundColour);
	}

	@media (pointer: fine) and (not (prefers-reduced-motion)) {
		transition:                 left $sideMenuToggleDuration;
		transition-timing-function: ease-in-out;
	}

	&.visible {
		left: 0;
	}

	section.links {
		display:         flex;
		gap:             $gap;
		justify-content: end;
		max-width:       $contentWidth;
		padding:         0 1rem;
		width:           100%;

		@media (orientation: portrait) {
			flex-direction: column;
		}

		section {
			display:        flex;
			flex-direction: column;
			gap:            $separatorWidth;

			p {
				background-color: var(--textColour);
				border-radius:    $separatorWidth;
				color:            var(--backgroundColour);
				font-weight:      bold;
				padding:          $separatorWidth 1rem;
				text-align:       center;
			}

			a {
				padding:  0 calc($separatorWidth * 2);
				position: relative;

				&[aria-current = "page"]::after {
					background-color: var(--textColour);
					border-radius:    $separatorWidth;
					content:          "";
					display:          block;
					height:           100%;
					position:         absolute;
					right:            0;
					top:              50%;
					transform:        translateY(-50%);
					width:            $separatorWidth;
				}
			}
		}
	}
}