Template:Top icon/styles.css

.template-topicon {
	filter: var(--filter-invert);
}

.template-topicon a {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-xs) var(--space-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-base);
	transition: var(--transition-hover);
	transition-property: opacity;
}

.template-topicon > a {
	gap: 0;
	padding-right: var(--space-sm);
	padding-left: var(--space-sm);
	font-size: 0;
	border-radius: var(--border-radius--medium);
}

@media screen and (min-width: 1120px) {
	.template-topicon > a {
		gap: var(--space-xs);
		font-size: var(--font-size-small);
	}
}

.template-topicon a:hover, .template-topicon a:focus {
	text-decoration: none;
}

.template-topicon a:active {
	color: var(--color-base--subtle);
	background-color: var(--background-color-quiet--active);
}

.template-topicon a:hover {
	color: var(--color-base--emphasized);
	background-color: var(--background-color-quiet--hover);
}

.template-topicon > a .citizen-ui-icon::before {
	opacity: var(--opacity-icon-base);
}

.template-topicon > a:hover .citizen-ui-icon::before {
	opacity: var(--opacity-icon-base--hover);
}
    
.template-topicon > a:active .citizen-ui-icon::before {
	opacity: var(--opacity-icon-base--active);
}