.bl-contact__chips { clear: both; display: flex; flex-wrap: wrap; gap: var(--sp-8); }

.bl-contact__chip { position: relative; cursor: pointer; }

.bl-contact__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.bl-contact__chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-16); border: 1px solid var(--bl-line); border-radius: 999px; font-size: var(--fs-14); color: var(--t-medium); transition: border-color .2s, background .2s, color .2s; }

.bl-contact__chip:hover span { border-color: color-mix(in srgb, var(--accent) 45%, var(--bl-line)); color: var(--t-bright); }

.bl-contact__chip input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }

.bl-contact__chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }