.text-tag { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--space-12); max-inline-size: 100%; padding: var(--space-2) var(--space-6); border: 1px solid var(--color-breadcrumb-muted); border-radius: var(--radius-feature); font-size: var(--fs-body); line-height: var(--line-height-control); color: var(--color-text); text-align: center; overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease-standard); }
.text-tag::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-tag-hover-background); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    .text-tag:hover { color: var(--color-on-accent); }
    .text-tag:hover::before { opacity: 1; }
}