.contact-slide {
  --contact-offset: 0px;
  --contact-label-opacity: 1;
  position: relative;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  height: 72px;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #5c635e, #444c46);
  box-shadow: inset 0 1px 1px #ffffff3d, inset 0 -1px 2px #00000021, 0 6px 18px #1d302215;
  direction: rtl;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: pointer;
}
.contact-slide-label {
  position: absolute;
  inset: 0 54px 0 0;
  display: grid;
  place-items: center;
  font: 400 17px/1.3 "IBM Plex Sans Arabic", sans-serif;
  color: #fff;
  background: linear-gradient(100deg, #c4ccc7 30%, #fff 48%, #c4ccc7 64%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: var(--contact-label-opacity);
  animation: contact-text-shine 2.8s ease-in-out infinite;
  transition: opacity 180ms ease;
  pointer-events: none;
}
button.contact-slide-knob {
  position: absolute;
  inset-inline-start: 6px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 10%, #f2f5f2);
  color: #31bc57;
  box-shadow: 0 2px 6px #00000024, inset 0 0 0 1px #ffffff;
  transform: translateX(var(--contact-offset));
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  z-index: 1;
}
.contact-slide-knob:focus-visible { outline: 3px solid #d5bd84; outline-offset: -4px; }
.contact-slide-phone {
  width: 29px;
  height: 29px;
  fill: currentColor;
  transform-origin: 50% 50%;
  animation: contact-phone-ring 3.4s ease-in-out infinite;
  pointer-events: none;
}
.contact-slide.is-dragging .contact-slide-knob { transition: none; cursor: grabbing; box-shadow: 0 3px 10px #00000035; }
.contact-slide.is-dragging .contact-slide-phone,
.contact-slide.is-completing .contact-slide-phone { animation: none; }
.contact-slide.is-completing .contact-slide-knob { transition-duration: 420ms; }
.contact-slide.is-open .contact-slide-knob { color: #1ca749; }
.contact-slide.is-disabled { opacity: .5; cursor: default; }
.contact-slide.is-disabled .contact-slide-knob { cursor: default; color: #8e9a90; }
.contact-slide.is-disabled .contact-slide-phone,
.contact-slide.is-disabled .contact-slide-label { animation: none; }
.contact-slide.is-disabled .contact-slide-label { font-size: 12px; }
.contact-slide-help, .contact-slide-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@keyframes contact-text-shine { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@keyframes contact-phone-ring {
  0%, 4%, 20%, 100% { transform: rotate(0); }
  6%, 10%, 14% { transform: rotate(-12deg); }
  8%, 12%, 16% { transform: rotate(12deg); }
  18% { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-slide-phone, .contact-slide-label { animation: none; }
  .contact-slide-knob, .contact-slide-label { transition: none !important; }
}