amezing/sass/layout/_header.scss

@use "../citrine/abstracts/functions" as *;
@use "../citrine/abstracts/mixins" as *;

#site-header {
	display: flex;
	position: sticky;
	grid-area: header;
	// height: 3rem;
	justify-content: space-between;
	// flex-wrap: nowrap;
	align-items: center;
	gap: 0.25rem;
	z-index: 2;
	// height: 3.75rem;
	inset-block-start: 0;
	// padding: 0.5rem 0.75rem;
	padding: 0.5rem;
	width: 100%;
	min-width: 0;

	&::before,
	&::after {
		position: absolute;
		inset: 0;
		@include easing-mask(bottom);
		inset-block-end: -100%;
		pointer-events: none;
		content: "";
	}

	&::before {
		z-index: -2;
		backdrop-filter: var(--blur);
		-webkit-backdrop-filter: var(--blur);
	}

	&::after {
		z-index: -1;
		background-color: var(--bg-color);
	}

	.title {
		margin-inline: 0.75rem;
		min-width: 0;
		overflow: hidden;
		color: var(--fg-muted-2);
		font-size: var(--font-size-small);
		line-height: 2rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.buttons {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.25rem;
		margin: 0;
		// margin-inline-start: auto;
		box-shadow: var(--edge-highlight), var(--shadow-glass);
		border-radius: 1.125rem;
		background-color: var(--glass-bg-1);
		padding: 0.25rem;
		list-style: none;

		li {
			flex: 0;
			margin-block: 0;
			padding-inline-start: 0;
		}

		& > li {
			height: fit-content;
			line-height: 0;
		}

		button,
		details {
			box-shadow: none;
			background-color: transparent;
			line-height: inherit;

			.icon {
				margin-inline-end: 0;
				box-shadow: none;
				background-color: transparent;
				padding: 0;
			}
		}

		button,
		summary {
			border-radius: 50%;
			padding: 0.375rem;

			&:hover {
				box-shadow: var(--edge-highlight);
				background-color: var(--bg-muted-1);
				color: var(--fg-muted-2);
			}

			&:active {
				transform: var(--active);
			}
		}

		details {
			box-shadow: none;
			border-radius: 0;
			padding: 0;
		}

		button {
			font-size: var(--font-size-medium);
		}

		summary {
			&:hover {
				box-shadow: var(--edge-highlight);
				background-color: var(--bg-muted-1);
			}

			&::before {
				display: none;
			}
		}

		details {
			display: block;
			position: relative;
			margin-block-end: 0;

			&::details-content {
				block-size: auto;
			}

			&[open] {
				&::details-content {
					block-size: auto;
				}

				summary {
					color: var(--fg-muted-1);

					&:hover {
						color: var(--fg-muted-2);
					}
				}

				@supports not (block-size: calc-size(auto, size)) {
					summary ~ * {
						animation: none;
					}
				}
			}
		}
	}
}

.buttons .dropdown {
	display: flex;
	position: absolute;
	flex-direction: column;
	gap: 0.25rem;
	transform-origin: top right;
	z-index: 1;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	animation: expand-up-right var(--transition-bezier);
	inset-block-start: calc(100% + 0.75rem);
	inset-inline-end: -0.25rem;
	box-shadow: var(--edge-highlight), var(--shadow-glass);
	border-radius: calc(var(--rounded-corner) + 0.25rem);
	background-color: var(--glass-bg-1);
	padding: 0.25rem;
	width: max-content;
	min-width: 8rem;
	list-style: none;

	:root[dir*="rtl"] & {
		transform-origin: top left;
		animation: expand-up-left var(--transition-bezier);
	}

	li {
		flex: 1;
	}

	a {
		box-shadow: none;
		border-radius: var(--rounded-corner);
		background-color: transparent;
		padding: 0.375rem 0.75rem;
		width: 100%;

		&:hover {
			box-shadow: var(--edge-highlight);
			background-color: var(--bg-muted-1) !important;
		}
	}
}

#site-sidebar-controls {
	display: flex;
	flex-shrink: 0;
	gap: 0.25rem;
	transition: width var(--transition), visibility var(--transition);
	margin-block: 0;
	box-shadow: var(--edge-highlight), var(--shadow-glass);
	border-radius: 1.125rem;
	background-color: var(--glass-bg-1);
	padding: 0.25rem;
	height: fit-content;
	line-height: 0;
	list-style: none;

	@media only screen and (max-width: 960px) {
		width: 2.25rem;

		&:has(#expand-sidebar:checked) {
			width: 6.25rem;

			#site-sidebar-modes {
				transform: none;
				visibility: visible;
				opacity: 1;
			}
		}
	}

	ul {
		padding-inline-start: 0;
		list-style: none;
	}

	li {
		display: inline-block;
		margin-block: 0;
		padding-inline-start: 0;

		label {
			display: inline-block;
			transition:
				box-shadow var(--transition),
				background-color var(--transition),
				color var(--transition),
				transform var(--transition-bezier);
			cursor: pointer;
			border-radius: 50%;
			padding: 0.375rem;
			height: fit-content;
			color: var(--fg-muted-1);
			line-height: 0;

			&:hover {
				box-shadow: var(--edge-highlight);
				background-color: var(--bg-muted-1);
				color: var(--fg-muted-2);
			}

			&:active {
				transform: var(--active);
			}
		}

		input[type="radio"] {
			& + label {
				position: relative;
				z-index: 1;

				&::before {
					@include gradient-fill;
					position: absolute;
					opacity: 0;
					z-index: -1;
					transition:
						opacity var(--transition),
						box-shadow var(--transition),
						background-color var(--transition);
					inset: 0;
					border-radius: inherit;
					content: "";
				}
			}

			&:checked + label {
				color: var(--contrast-color);

				&:hover {
					box-shadow: none;
					background-color: transparent;
				}

				&:hover::before {
					box-shadow: var(--edge-highlight);
					background-color: var(--accent-color);
				}

				&::before {
					opacity: 1;
				}
			}
		}

		input[type="radio"],
		input[type="checkbox"] {
			&:focus-visible + label {
				animation: focus-in var(--transition);
				outline: 0.125rem solid var(--accent-color);
				outline-offset: 0.125rem;
			}

			@supports not selector(:focus-visible) {
				&:focus + label {
					animation: focus-in var(--transition);
					outline: 0.125rem solid var(--accent-color);
					outline-offset: 0.125rem;
				}
			}
		}
	}

	#expand-sidebar-li {
		display: none;

		@media only screen and (max-width: 960px) {
			display: inline-block;
		}
	}
}

#site-sidebar-modes {
	display: flex;
	gap: 0.25rem;
	transform-origin: left;
	transition:
		visibility var(--transition),
		opacity var(--transition),
		transform var(--transition);

	@media only screen and (max-width: 960px) {
		transform: translateX(-2.25rem);
		visibility: hidden;
		opacity: 0;
	}
}