/* @import '../fonts/bootstrap-icons.woff.font-family.wxss'; */

switch.wv-switch {
  width: auto;
}

switch.wv-switch .wx-switch-input {
  border: unset;
  position: relative;
  --wv-switch-width: 0rpx;
  --wv-switch-height: 0rpx;

  width: var(--wv-switch-width);
  height: var(--wv-switch-height);
}

switch.wv-switch .wx-switch-input::after {
  transform: unset;
  
  --wv-dot-width: calc(var(--wv-switch-height) - 8rpx);
  --wv-dot-height: var(--wv-dot-width);
  --wv-dot-padding: 4rpx;
  width: var(--wv-dot-width);
  height: var(--wv-dot-height);

  position: absolute;
  left: var(--wv-dot-padding);
  top: var(--wv-dot-padding);
}

switch.wv-switch .wx-switch-input.wx-switch-input-checked::after {
  transform: translateX(calc(var(--wv-switch-width) - var(--wv-dot-width) - var(--wv-dot-padding) - var(--wv-dot-padding)));
}

switch.wv-switch.square {aspect-ratio: unset;}
switch.wv-switch.square .wx-switch-input {border-radius: var(--wv-border-radius-none);}
switch.wv-switch.square .wx-switch-input::after {border-radius: var(--wv-border-radius-none);}

/* Default/Primary type */
switch.wv-switch .wx-switch-input-disabled, switch.wv-switch.default-type .wx-switch-input-disabled { 
  background-color: var(--wv-background-color-primary-disabled); 
}
switch.wv-switch .wx-switch-input.wx-switch-input-checked, switch.wv-switch.default-type .wx-switch-input.wx-switch-input-checked { 
  background-color: var(--wv-background-color-primary); 
}
switch.wv-switch .wx-switch-input::after, switch.wv-switch.default-type .wx-switch-input::after { 
  background-color: var(--wv-content-color-fit-background-primary); 
}

/* Color variants */
switch.wv-switch.primary .wx-switch-input-disabled { background-color: var(--wv-background-color-primary-disabled); }
switch.wv-switch.primary .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-primary); }
switch.wv-switch.primary .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-primary); }

switch.wv-switch.secondary .wx-switch-input-disabled { background-color: var(--wv-background-color-secondary-disabled); }
switch.wv-switch.secondary .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-secondary); }
switch.wv-switch.secondary .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-secondary); }

switch.wv-switch.info .wx-switch-input-disabled { background-color: var(--wv-background-color-info-disabled); }
switch.wv-switch.info .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-info); }
switch.wv-switch.info .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-info); }

switch.wv-switch.success .wx-switch-input-disabled { background-color: var(--wv-background-color-success-disabled); }
switch.wv-switch.success .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-success); }
switch.wv-switch.success .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-success); }

switch.wv-switch.danger .wx-switch-input-disabled { background-color: var(--wv-background-color-danger-disabled); }
switch.wv-switch.danger .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-danger); }
switch.wv-switch.danger .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-danger); }

switch.wv-switch.warning .wx-switch-input-disabled { background-color: var(--wv-background-color-warning-disabled); }
switch.wv-switch.warning .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-warning); }
switch.wv-switch.warning .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-warning); }

switch.wv-switch.error .wx-switch-input-disabled { background-color: var(--wv-background-color-error-disabled); }
switch.wv-switch.error .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-error); }
switch.wv-switch.error .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-error); }

switch.wv-switch.poppy .wx-switch-input-disabled { background-color: var(--wv-background-color-poppy-disabled); }
switch.wv-switch.poppy .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-poppy); }
switch.wv-switch.poppy .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-poppy); }

switch.wv-switch.pink .wx-switch-input-disabled { background-color: var(--wv-background-color-pink-disabled); }
switch.wv-switch.pink .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-pink); }
switch.wv-switch.pink .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-pink); }

switch.wv-switch.jade .wx-switch-input-disabled { background-color: var(--wv-background-color-jade-disabled); }
switch.wv-switch.jade .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-jade); }
switch.wv-switch.jade .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-jade); }

switch.wv-switch.forest .wx-switch-input-disabled { background-color: var(--wv-background-color-forest-disabled); }
switch.wv-switch.forest .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-forest); }
switch.wv-switch.forest .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-forest); }

switch.wv-switch.cute .wx-switch-input-disabled { background-color: var(--wv-background-color-cute-disabled); }
switch.wv-switch.cute .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-cute); }
switch.wv-switch.cute .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-cute); }

switch.wv-switch.plain .wx-switch-input-disabled { background-color: var(--wv-background-color-plain-disabled); }
switch.wv-switch.plain .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-plain); }
switch.wv-switch.plain .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-plain); }

switch.wv-switch.light .wx-switch-input-disabled { background-color: var(--wv-background-color-white-disabled); }
switch.wv-switch.light .wx-switch-input.wx-switch-input-checked { background: rgba(var(--wv-theme-light-rgb), 1); }
switch.wv-switch.light .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-white); }

switch.wv-switch.dark .wx-switch-input-disabled { background-color: var(--wv-background-color-dark-disabled); }
switch.wv-switch.dark .wx-switch-input.wx-switch-input-checked { background-color: var(--wv-background-color-dark); }
switch.wv-switch.dark .wx-switch-input::after { background-color: var(--wv-content-color-fit-background-dark); }

/* Size variants */
switch.wv-switch.huge .wx-switch-input {
  --wv-switch-width: calc(var(--wv-form-switch-height-huge) * 2);
  --wv-switch-height: var(--wv-form-switch-height-huge);
}
switch.wv-switch.large .wx-switch-input {
  --wv-switch-width: calc(var(--wv-form-switch-height-large) * 2);
  --wv-switch-height: var(--wv-form-switch-height-large);
}
switch.wv-switch .wx-switch-input, switch.wv-switch.default-size .wx-switch-input {
  --wv-switch-width: calc(var(--wv-form-switch-height-default) * 2);
  --wv-switch-height: var(--wv-form-switch-height-default);
}
switch.wv-switch.small .wx-switch-input {
  --wv-switch-width: calc(var(--wv-form-switch-height-small) * 2);
  --wv-switch-height: var(--wv-form-switch-height-small);
}
switch.wv-switch.mini .wx-switch-input {
  --wv-switch-width: calc(var(--wv-form-switch-height-mini) * 2);
  --wv-switch-height: var(--wv-form-switch-height-mini);
}