/* Dark theme variables */
:root{
  --flat-track-dark: #2121218f;
  --flat-thumb-dark: #e2e2e2;
  --flat-border-dark: 3px solid #a3a3a3;
  --flat-border-checked-dark: 3px solid #7fc6a6;
}

/* Default theme */
.x-toggle-flat.x-toggle-btn {
  padding: 2px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
}

.x-toggle-flat.x-toggle-btn::after {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}

.x-toggle:checked + label .x-toggle-flat.x-toggle-btn {
  border: 4px solid #7fc6a6;
}

.x-toggle:checked + label .x-toggle-flat.x-toggle-btn::after {
  left: 50%;
  background: #7fc6a6;
}

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

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

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

/* Dark mode styling */

.x-toggle-flat.dark.x-toggle-btn {
  background: var(--flat-track-dark);
  border: var(--flat-border-dark);
}

.x-toggle-flat.dark.x-toggle-btn::after {
  background: var(--flat-thumb-dark);
}

.x-toggle:checked + label .x-toggle-flat.dark.x-toggle-btn {
  border: var(--flat-border-checked-dark);
}

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