frutjam/dist/components/swap.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.swap{position:relative;display:inline-grid;place-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;:where(&) :where(input[type=checkbox]){-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}:where(&) :where(.swap-indeterminate),:where(&) :where(.swap-off),:where(&) :where(.swap-on){grid-column:1;grid-row:1;transition:opacity .3s ease-in-out,rotate .3s ease-in-out,transform .3s ease-in-out}:where(&) :where(.swap-indeterminate),:where(&) :where(.swap-on){opacity:0;pointer-events:none}:where(&) :where(.swap-off){opacity:1}&.swap-active,&:has(input:checked){:where(.swap-on){opacity:1;pointer-events:auto}:where(.swap-off){opacity:0;pointer-events:none}}&:has(input:indeterminate){:where(.swap-indeterminate){opacity:1;pointer-events:auto}:where(.swap-on){opacity:0;pointer-events:none}}}.swap-rotate{:where(&) :where(.swap-indeterminate),:where(&) :where(.swap-on){rotate:45deg}&.swap-active,&:has(input:checked){:where(.swap-off){rotate:-45deg}:where(.swap-indeterminate),:where(.swap-on){rotate:0deg}}}.swap-flip{perspective:16rem;:where(&) :where(.swap-indeterminate),:where(&) :where(.swap-on){backface-visibility:hidden;transform:rotateY(180deg)}:where(&) :where(.swap-off){backface-visibility:hidden;transform:rotateY(0deg)}&.swap-active,&:has(input:checked){:where(.swap-off){transform:rotateY(-180deg)}:where(.swap-indeterminate),:where(.swap-on){transform:rotateY(0deg)}}}