/* Dark theme variables */
:root{
  --ios-track-dark: #2121218f;
  --ios-border-dark: 1px solid #646464;
  --ios-thumb-checked-dark: #86d993;
}

/* Default theme */
.x-toggle-ios.x-toggle-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}

.x-toggle-ios.x-toggle-btn::after {
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.x-toggle-ios.x-toggle-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}

.x-toggle-ios.x-toggle-btn:active::after {
  padding-right: 0.8em;
}

.x-toggle:checked + label > .x-toggle-ios.x-toggle-btn {
  background: #54d159;
}

.x-toggle:checked + label > .x-toggle-ios.x-toggle-btn:active {
  box-shadow: none;
}

.x-toggle:checked + label > .x-toggle-ios.x-toggle-btn:active::after {
  margin-left: -0.8em;
}

.x-toggle-ios.small {
  width: 3em;
  height: 1.6em;
}

.x-toggle-ios.medium {
  width: 4em;
  height: 2.1em;
  padding: 3px;
}

.x-toggle-ios.large {
  width: 4.7em;
  height: 2.1em;
  padding: 4px;
}

/* Dark mode styling */
.x-toggle-ios.dark.x-toggle-btn {
  background: var(--ios-track-dark);
  border: var( --ios-border-dark);
}

.x-toggle:checked + label > .x-toggle-ios.dark.x-toggle-btn {
  background: var(--ios-thumb-checked-dark);
}

/* Auto mode styling */
@media (prefers-color-scheme: dark) {
  .x-toggle-ios.auto.x-toggle-btn {
    background: var(--ios-track-dark);
    border: var( --ios-border-dark);
  }
  
  .x-toggle:checked + label > .x-toggle-ios.auto.x-toggle-btn {
    background: var(--ios-thumb-checked-dark);
  }
}