.nav {
	&.lg {
		a {
			gap: 8px;

			h6 {
				font-size: 14px;
				font-weight: 600;
				line-height: 140%;
			}

			svg {
				transform: scale(0.9);
			}

			.badge {
				padding: 3px;
				min-width: 22px;
			}
		}
	}

	a {
		display: flex;
		align-items: center;
		gap: 10px;
		position: relative;

		&:hover {
			opacity: 0.8;
		}

		&.selected {
			h6 {
				color: var(--font-main-color);
			}

			svg * {
				fill: var(--font-main-color);
			}
		}

		&.disabled {
			opacity: 0.5;
			pointer-events: none;

			&:hover {
				opacity: 0.5;
			}
		}

		h6 {
			color: #1f8feb;
		}

		svg path {
			fill: #1f8feb;
		}

		img {
			height: 20px;
			width: auto;

			@media screen and (max-width: 1600px) {
				width: 32px;
				height: auto;
			}

			@media screen and (max-width: 900px) {
				width: 20px;
				height: auto;
			}
		}
	}
}

.nav__desktop {
	display: flex;
	gap: 40px;
}

.nav__mobile {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;

	@media screen and (min-width: 900px) {
		padding: 60px;
		gap: 50px;

		h6 {
			font-size: 32px;
		}
	}
}
