.navbar {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	align-items: center;
	width: 100svw;
	height: var(--navSize);
	background-color: #d94253;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);

	& > .navButton {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: var(--navSize);
		height: var(--navSize);
		border-radius: 50%;
		background-color: #d94253;
		color: #ffffff;

		& > svg {
			width: calc(var(--navSize) / 2.5);
		}

		&.selected {
			scale: 1.2;
			margin-top: calc(var(--navSize) / -2);

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
				clip-path: inset(-6px -6px 42px -6px);
			}
		}

		& > .navButtonLabel {
			font-size: 0.7rem;
			color: #ffffff;
		}
	}
}