src/static/scripts/components/global/header/_header.scss
@use "../../../../style/vars";

#mainWrapper > .header {
	width: 100%;
	height: vars.$header-height;
	position: fixed;
	z-index: 50;
	transform: translateY(-100%);
	transition: transform .2s linear;
	--window-aspect-ratio: 1.777;

	.actions {
		position: relative;
		z-index: 55;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		height: 100%;
		transition: all .2s linear;

		&.collapsed {
			@media (max-width: vars.$smaller-screen-max-width) {
				grid-template-columns: 3rem auto 1fr;

				.feedSpecific {
					flex-wrap: wrap;
				}
			}

			.collapser img {
				transform: rotate(0deg) !important;
			}

			.mainItems > :not(.home) {
				transform: translateX(-4rem) scale(.75);
				opacity: 0;
				visibility: hidden;
				max-width: 0;
				overflow: hidden;
			}
		}

		> * {
			height: 100%;
			display: flex;
			align-items: center;
			gap: .5rem;
			@media (max-width: vars.$smaller-screen-max-width) {
				gap: .25rem;
			}
		}

		> :last-child {
			justify-content: flex-end;
		}

		.leftItems {
			gap: 0;

			> * {
				width: 1.5rem;
				height: 1.5rem;
				--dim: 2rem;

				img {
					width: 1.5rem;
					height: 1.5rem;
					opacity: .4;
					transition: all ease .125s;

					&:hover {
						opacity: 1;
					}
				}
			}

			.pinToggleButton {
				width: 1.25rem;
				height: 1.25rem;

				img {
					width: 1.25rem;
					height: 1.25rem;
					transform: rotate(0deg);
					filter: grayscale(1);
				}
			}

			.collapser {
				img {
					transform: rotate(180deg);
				}

				&::after {
					left: auto;
				}
			}

			.pinned img {
				transform: rotate(45deg) scale(.75);
			}
		}

		.mainItems {
			position: relative;
			z-index: 1;

			> :not(.home) {
				transform: translateX(0) scale(1);
				opacity: 1;
				visibility: visible;
				max-width: 90vw;
				transition: all .25s ease;
			}

			> .showSettingsButton {
				--dim: 2.5rem;

				> img {
					width: 2.5rem;
				}
			}

			.home {
				&, img {
					width: 2.5rem;
					height: 2.5rem;
				}
			}

			&::before {
				content: "";
				position: absolute;
				top: 25%;
				width: 100%;
				height: 50%;
				background-color: vars.$header-bg;
				box-shadow: 0.75rem 0 1rem 0 vars.$header-bg;
			}
		}

		.feedSpecific {
			margin-right: .5rem;

			&:empty {
				display: none !important;
			}

			.feedTitle {
				max-width: 12rem;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: right;
			}

			.dropDownButton {
				height: 2.3rem;
				line-height: 2.3rem;
				border-radius: 1.15rem;
			}
		}
	}

	.expander {
		z-index: 50;
		top: 0;
		pointer-events: none;

		svg {
			width: 100%;
			height: calc(#{vars.$header-height} * 2);
			transform: scaleX(max(1, calc(1.77777 / var(--window-aspect-ratio))));

			.filled {
				fill: vars.$header-bg;
				stroke: none;
			}

			.stroked {
				transition: stroke .5s ease;
				fill: none;
				stroke: vars.$header-stroke;
			}
		}
	}

	> .accessibilitySpacer {
		width: 25%;
		height: 50%;
		transform: translateX(-50%) scaleX(max(1, calc(1.77777 / var(--window-aspect-ratio))));
	}

	&.hover {
		transform: translateY(0);

		.actions {
			height: 130%;
		}

		> .accessibilitySpacer {
			height: 100%;
			width: 100%;
			top: vars.$header-height;
		}
	}

	&.contentIsLoading {
		.stroked {
			stroke: lightskyblue !important;
		}
	}

	&.pinned {
		> .accessibilitySpacer {
			display: none;
		}

		> .actions {
			height: 100%;
		}
	}
}

main {
	transition: transform .2s ease;
}
body.pinnedHeader  main {
	transform: translateY(vars.$header-height);
}

