Template:DynamicFace/styles.css

.dface {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: .5rem;
	border: 1px solid var(--BlueThemeSecondary);
	border-radius: var(--BorderRadius);
	background: var(--BlueThemePrimary);
}

.dface-stack {
	position: relative;
	flex-shrink: 0;
	border-radius: calc(var(--BorderRadius) - 2px);
	background: oklch(.97 0 0);
}

.dface-layer {
	position: absolute;
	inset: 0;
}

.dface-layer img    { display: block; }
.dface-ctrl[hidden] { display: none; }

.dface-bar {
	justify-content: center;
	gap: .5rem;
	display: flex;
}

.dface-ctrl {
	grid-template-columns: auto 1fr auto;
	align-items: center;
	row-gap: .25rem;
	font-size: .75rem;
	line-height: 1;
	display: grid;
	isolation: isolate;
}

.dface-ctrl:after {
	content: "";
	z-index: -7;
	grid-area: 2 / 1 / 3 / 4;
	align-self: stretch;
	border: 1px solid var(--BlueThemeSecondary);
	border-radius: var(--BorderRadiusCircle);
	background: var(--BasicBackground);
}

.dface-label {
	text-align: center;
	color: color-mix(in oklch, var(--theme-page-text-color) 70%, transparent);
	grid-area: 1 / 1 / 2 / -1;
	font-weight: 600;
}

.dface-count {
	text-align: center;
	font-variant-numeric: tabular-nums;
	min-width: 2.5em;
	color: var(--theme-page-text-color);
	grid-area: 2 / 2;
}

.dface-btn {
	border-radius: var(--BorderRadiusCircle);
	width: 1.5rem;
	height: 1.5rem;
	color: var(--theme-link-color);
	cursor: pointer;
	user-select: none;
	grid-area: 2 / 1;
	place-items: center;
	margin: 3px;
	transition: background-color .15s, transform .1s;
	display: inline-grid;
}

.dface-btn .ego-i {
	font-size: 1rem;
	top: 0;
}

.dface-btn:last-child { grid-column: 3; }
.dface-btn:hover      { background: var(--BasicBackgroundDark); }
.dface-btn:active     { transform: scale(.9); }

.dface-btn:focus-visible {
	outline: 2px solid var(--PrimaryColour);
	outline-offset: 1px;
}