/*! Light / dark reading switch for the tutorials (snippets/ab-mode-switch.liquid).
   Dark stays the default. The reader's choice is stored as
   localStorage['ab-article-theme'] and put on <html data-ab-theme="light">
   by layout/theme.liquid before anything paints, on the tutorials index and
   every article. The knob follows the switch (aria-checked) at once; the
   page follows the html attribute. */.ab-mode{--ab-mode-ease: cubic-bezier(.32, .72, 0, 1);position:relative;flex:none;width:66px;height:32px;padding:0;border:0;border-radius:999px;background:#1b2a5c;box-shadow:inset 0 0 0 1px #7896ff2e;cursor:pointer;-webkit-tap-highlight-color:transparent;view-transition-name:ab-mode;transition:background-color .45s var(--ab-mode-ease),box-shadow .45s var(--ab-mode-ease)}.ab-mode[aria-checked=true]{background:#ffcf33;box-shadow:inset 0 0 0 1px #a06e002e}.ab-mode:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}.ab-mode:focus-visible{outline:2px solid #2997ff;outline-offset:3px}.ab-mode svg{display:block;width:15px;height:15px}.ab-mode__track svg{position:absolute;top:50%;margin-top:-7.5px;transition:color .45s var(--ab-mode-ease)}.ab-mode__track .ab-mode__sun{left:10px;color:#ffffff8c}.ab-mode__track .ab-mode__moon{right:10px;width:14px;height:14px;margin-top:-7px;color:#6e46008c}.ab-mode__knob{position:absolute;top:3px;left:3px;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#fff;box-shadow:0 3px 8px #00000040,0 1px 1px #0000001a;transform:translate(34px);will-change:transform;transition:transform .45s var(--ab-mode-ease),width .3s var(--ab-mode-ease)}.ab-mode__knob svg{grid-area:1 / 1;transition:opacity .3s var(--ab-mode-ease),transform .45s var(--ab-mode-ease)}.ab-mode__knob .ab-mode__sun{color:#ff9500;opacity:0;transform:rotate(-90deg) scale(.4)}.ab-mode__knob .ab-mode__moon{color:#1b2a5c;width:14px;height:14px}.ab-mode[aria-checked=true] .ab-mode__knob{transform:none}.ab-mode[aria-checked=true] .ab-mode__knob .ab-mode__sun{opacity:1;transform:none}.ab-mode[aria-checked=true] .ab-mode__knob .ab-mode__moon{opacity:0;transform:rotate(90deg) scale(.4)}.ab-mode:active .ab-mode__knob{width:31px;transform:translate(29px)}.ab-mode[aria-checked=true]:active .ab-mode__knob{transform:none}@media(prefers-reduced-motion:reduce){.ab-mode,.ab-mode__track svg,.ab-mode__knob,.ab-mode__knob svg{transition-duration:.01s}}::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(ab-mode){animation:none}::view-transition-old(ab-mode){display:none}::view-transition-new(ab-mode){animation:none}html[data-ab-theme=light] .ab-mode__knob{box-shadow:0 3px 8px #00000029,0 1px 1px #00000014}
/*# sourceMappingURL=/cdn/shop/t/224/assets/ab-mode.css.map */