.header {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.topRow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* the user page's sub-page back button */
.back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	background-color: var(--color-bg);
	border: 2px solid var(--color-bg-higher);
	color: var(--color-text);
	transition: all 0.2s;

	&:hover {
		background-color: var(--color-bg-higher);
	}
}

.backIcon {
	width: 24px;
	height: 24px;
}

.actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-inline-start: auto;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1-5);
	padding: var(--s-0-5) var(--s-2-5);
	border-radius: var(--radius-full);
	font-size: var(--font-2xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: var(--border-style);
	white-space: nowrap;
	color: var(--color-info-high);
	border-color: var(--color-info-low);
	background: var(--color-info-low);
}