@layer components {
  :root {
    --twentyone--toggle--width: calc(var(--twentyone--spacing--32) * 1.25);
    --twentyone--toggle--height: var(--twentyone--spacing--24);
    --twentyone--toggle--padding: .0625em;
    --twentyone--toggle--border-radius: var(--twentyone--spacing--8);
    --twentyone--toggle--border-width: 1px;
    --twentyone--toggle--border-color: transparent;
    --twentyone--toggle--border-color-active: transparent;
    --twentyone--toggle--background: rgba(var(--twentyone--color--black-rgb), .1);
    --twentyone--toggle--background-active: var(--twentyone--color--primary);
    --twentyone--toggle--thumb-background: var(--twentyone--color--white);
    --twentyone--toggle--thumb-background-active: var(--twentyone--color--white);
    --twentyone--toggle--thumb-border-radius: 50%;
    --twentyone--toggle--thumb-move: 1.25em;
    --twentyone--toggle--inverted-border-color: transparent;
    --twentyone--toggle--inverted-border-color-active: transparent;
    --twentyone--toggle--inverted-background: rgba(var(--twentyone--color--white-rgb), .25);
    --twentyone--toggle--inverted-background-active: var(--twentyone--color--white);
    --twentyone--toggle--inverted-thumb-background: var(--twentyone--color--white);
    --twentyone--toggle--inverted-thumb-background-active: var(--twentyone--color--black);
  }
  .twentyone-toggle {
    --fake-element--width: var(--twentyone--toggle--width);
    --fake-element--height: var(--twentyone--toggle--height);
  }
  .twentyone-toggle .twentyone-fake-element {
    background: var(--twentyone--toggle--background);
    border-color: var(--twentyone--toggle--border-color);
    border-style: solid;
    border-width: var(--twentyone--toggle--border-width);
    height: var(--twentyone--toggle--height);
    justify-content: flex-start;
    padding: var(--twentyone--toggle--padding);
    width: var(--twentyone--toggle--width);
    border-radius: var(--twentyone--toggle--border-radius);
  }
  .twentyone-toggle .twentyone-fake-element::before {
    aspect-ratio: 1;
    background: var(--twentyone--toggle--thumb-background);
    content: "";
    display: block;
    height: 100%;
    position: relative;
    border-radius: calc(var(--twentyone--toggle--border-radius) - var(--twentyone--toggle--padding));
    transition: var(--twentyone--element--transition);
  }
  .twentyone-toggle input:checked ~ .twentyone-fake-element {
    background: var(--twentyone--toggle--background-active);
    border-color: var(--twentyone--toggle--border-color-active);
  }
  .twentyone-toggle input:checked ~ .twentyone-fake-element::before {
    background: var(--twentyone--toggle--thumb-background-active);
    translate: calc(var(--twentyone--toggle--width) - var(--twentyone--toggle--padding) * 2 - var(--twentyone--toggle--border-width) * 2 - 100%) 0;
  }
  .twentyone-toggle.is--inverted .twentyone-fake-element {
    background: var(--twentyone--toggle--inverted-background);
    border-color: var(--twentyone--toggle--inverted-border-color);
  }
  .twentyone-toggle.is--inverted .twentyone-fake-element::before {
    background: var(--twentyone--toggle--inverted-thumb-background);
  }
  .twentyone-toggle.is--inverted input:checked ~ .twentyone-fake-element {
    background: var(--twentyone--toggle--inverted-background-active);
    border-color: var(--twentyone--toggle--inverted-border-color-active);
  }
  .twentyone-toggle.is--inverted input:checked ~ .twentyone-fake-element::before {
    background: var(--twentyone--toggle--inverted-thumb-background-active);
  }
}