frontend/src/app/ui/AppShell.module.css

.content {
	max-width: 1120px;
	margin-inline: auto;
}

.header {
	align-items: center;
	display: flex;
	padding: 0 var(--mantine-spacing-md);
}

.bottomNav {
	display: none;
}

.navIcon {
	display: inline-flex;
	flex-shrink: 0;
}

.portfolioIcon {
	color: var(--mantine-color-blue-7);
}

.cardsIcon {
	color: var(--mantine-color-grape-7);

	& svg {
		overflow: visible;
	}
}

.rubles {
	pointer-events: none;
	color: var(--mantine-color-green-8);
	stroke: currentColor;

	& path {
		opacity: 0;
		--flight-x: -7px;
		--flight-rotation: -20deg;
		--flight-delay: 0ms;
	}

	& path:nth-child(2) {
		--flight-x: 0px;
		--flight-rotation: 8deg;
		--flight-delay: 120ms;
	}

	& path:nth-child(3) {
		--flight-x: 7px;
		--flight-rotation: 24deg;
		--flight-delay: 240ms;
	}
}

.stocksIcon {
	color: var(--mantine-color-green-8);
}

.bondsIcon {
	color: var(--mantine-color-orange-8);
}

.settingsIcon {
	color: var(--mantine-color-gray-7);
}

.portfolioRuble {
	stroke: var(--mantine-color-green-8);
	opacity: 0;
}

.stockArrow {
	transform-origin: 21px 5px;
}

.topSlider,
.bottomSlider {
	fill: var(--mantine-color-body);
}

@media (prefers-reduced-motion: no-preference) {
	.navLink {
		transition: background-color 180ms ease-in-out;
	}

	.drawStroke,
	.couponLines path {
		stroke-dasharray: 1;
	}

	.topSlider {
		--slider-offset: 3px;
		--slider-delay: 0ms;
	}

	.bottomSlider {
		--slider-offset: -3px;
		--slider-delay: 160ms;
	}

	.couponLines path:nth-child(2) {
		--line-delay: 140ms;
	}

	.couponLines path:nth-child(3) {
		--line-delay: 280ms;
	}

	svg[data-icon-animating] {
		.rubles path {
			animation: ruble-fly 800ms ease-out var(--flight-delay) both;
		}
		.portfolioHandle {
			animation: handle-lift 1200ms ease-in-out;
		}
		.portfolioLid {
			animation: lid-open 1200ms ease-in-out;
		}
		.portfolioRuble {
			animation: portfolio-ruble-reveal 1200ms ease-in-out;
		}
		.stockArrow {
			animation: arrow-pop 300ms ease-out 400ms both;
		}
		.couponLines path {
			animation: stroke-draw 300ms ease-out var(--line-delay, 0ms) both;
		}
		.drawStroke {
			animation: stroke-draw 450ms ease-out;
		}
		:is(.topSlider, .bottomSlider) {
			animation: slider-slide 650ms ease-in-out var(--slider-delay) both;
		}
	}
}

@keyframes ruble-fly {
	0% {
		opacity: 0;
		transform: translate(0, 4px);
	}
	20%,
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(var(--flight-x), -10px) rotate(var(--flight-rotation));
	}
}

@keyframes handle-lift {
	0%,
	100% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-3px);
	}
	40%,
	75% {
		transform: translateY(-3px);
	}
}

@keyframes lid-open {
	0%,
	15%,
	100% {
		transform: translateY(0);
	}
	40%,
	75% {
		transform: translateY(-3px);
	}
}

@keyframes portfolio-ruble-reveal {
	0%,
	25%,
	100% {
		opacity: 0;
		transform: translateY(2px);
	}
	40%,
	75% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes arrow-pop {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}
	60% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes stroke-draw {
	0% {
		stroke-dashoffset: 1;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes slider-slide {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(var(--slider-offset));
	}
}

@media (max-width: 47.99375em) {
	.bottomNav {
		background: var(--mantine-color-white);
		border-top: 1px solid var(--mantine-color-gray-3);
		bottom: 0;
		display: flex;
		justify-content: space-around;
		left: 0;
		padding: var(--mantine-spacing-xs) 2px;
		gap: 2px;
		font-size: 11px;
		& a {
			min-width: 0;
			padding: 8px 2px;
			text-align: center;
		}
		position: fixed;
		right: 0;
		z-index: 200;
	}

	.active {
		color: var(--mantine-primary-color-filled);
		font-weight: 600;
	}

	.main {
		padding-bottom: 5rem;
	}
}