.a11y-panel-enter-active {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.a11y-panel-leave-active {
  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ios-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  background: #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  pointer-events: auto;
}

.ios-toggle input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.ios-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 0;
}

.ios-toggle input:checked + .toggle-track::after {
  transform: translateX(18px);
}

.ios-toggle input:checked + .toggle-track {
  background: rgba(var(--color-primary-500), 1);
}

.ios-toggle input:checked ~ .ios-toggle-ball {
  transform: translateX(18px);
}

.ios-toggle.is-checked {
  background: rgba(var(--color-primary-500), 1);
}

.ios-toggle:has(input:checked) {
  background: rgba(var(--color-primary-500), 1);
}

.ios-toggle:has(input:checked)::after {
  transform: translateX(18px);
}

.dark .ios-toggle {
  background: #404040;
}

.dark .ios-toggle::after {
  background: #f5f5f5;
}