.contact-pill {
  --contact-item: 39px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--spacing-xxxsmall);
  border: var(--stroke-xsmall) solid var(--border-transparent);
  border-radius: var(--radius-max);
  background: var(--background-tint);
}

.contact-pill-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--contact-item);
  height: var(--contact-item);
  padding: 0;
  border: 0;
  border-radius: var(--radius-max);
  background: transparent;
  color: var(--content-tertiary);
  cursor: pointer;
  transition: color 160ms ease;
}

.contact-pill-item svg {
  width: var(--icon-medium);
  height: var(--icon-medium);
}

.contact-pill-item[data-on] { color: var(--content-primary); }

.contact-pill {
  --plane-body-top: #575757;
  --plane-body-bottom: #151515;
  --plane-pane-top: #E3E3E599;
  --plane-pane-bottom: #BBBBC099;
}

.contact-pill-item[data-on] {
  --plane-body-top: #757575;
  --plane-body-bottom: #2E2E2E;
  --plane-pane-top: #E3E3E5;
  --plane-pane-bottom: #D8D8DBCC;
}

:root[data-theme="light"] .contact-pill-item[data-on] {
  --plane-body-top: #575757;
  --plane-body-bottom: #070708;
  --plane-pane-top: #CFCFD199;
  --plane-pane-bottom: #89898E;
}

.plane-body-top { stop-color: var(--plane-body-top); }
.plane-body-bottom { stop-color: var(--plane-body-bottom); }
.plane-pane-top { stop-color: var(--plane-pane-top); }
.plane-pane-bottom { stop-color: var(--plane-pane-bottom); }

.contact-pill stop { transition: stop-color 160ms ease; }

.contact-pill-item:focus-visible {
  outline: var(--stroke-large) solid var(--content-expressive-red);
  outline-offset: 3px;
}

.contact-pill-thumb {
  position: absolute;
  top: var(--spacing-xxxsmall);
  height: var(--contact-item);
  border-radius: var(--radius-max);
  border: var(--stroke-small) solid var(--border-primary);
  background: var(--background-overlay2);
  box-shadow: var(--effect-style-inner-shadow-thumb);
  pointer-events: none;
  opacity: 0;
  transition:
    left 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    right 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 200ms ease;
}

.contact-pill-thumb.is-on { opacity: 1; }

.contact-pill[data-cursor-in="true"] .contact-pill-thumb { opacity: 0; transition: opacity 120ms ease; }

@media (prefers-reduced-motion: reduce) {
  .contact-pill-thumb { transition-duration: 1ms, 1ms, 120ms; }
}