.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);
}
.template-topicon > a:hover {
background-color: var(--background-color-quiet--hover);
}
.template-topicon > a:active {
background-color: var(--background-color-quiet--active);
}
.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);
}
@media screen and (min-width: 1120px) {
.template-topicon > a {
gap: var(--space-xs);
font-size: var(--font-size-small);
}
}