/*! purgecss start ignore */

/*********************************************************
 *              Mobius Toggle Component
 *
 * - with css    houdini: none,
 * - with global control: none,
 * - use  global params : none,
 * - set  global params : none,
 * - use  theme  props  : --bg-color-normal, --fg-color-primary,
 * - release     props  : none,
 *
 * - usage: none,
 *
 * - classes: .mobius-toggle, .mobius-toggle-checked
 *
 * - TODO: none,
 *
 * - 1. none comment,
 *
 * !important none
 *
 *********************************************************/

:root.mobius-base,
html.mobius-base,
page.mobius-base,
page,
.mobius-base {
  --toggle-size: 4rem;
}

.mobius-toggle {
  position: relative;
  width: var(--toggle-size);
  height: calc(var(--toggle-size) / 2);
  & input,
  & checkbox-group,
  & checkbox {
    display: none;
  }
  & label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      background: var(--bg-color-normal);
      box-sizing: border-box;
    }
    &::before {
      height: 80%;
      width: 40%;
      margin: 5% 5%;
      border: 2px solid var(--fg-color-primary);
    }
    &::after {
      height: 20%;
      width: 10%;
      margin: 20%;
    }
    &:hover::after,
    &:active::after {
      background: var(--fg-color-primary);
    }
  }
  & input:checked + label,
  &.mobius-toggle--checked label {
    &::before,
    &::after {
      left: 50%;
    }
  }
}

/*! purgecss end ignore */