.klarkUiCustomSwitchContainer{width:fit-content;max-width:none;padding:0}.klarkUiCustomSwitch{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;line-height:var(--k-typo-label-leading);color:var(--k-color-fixed-000);background-color:var(--k-color-fixed-fff);box-shadow:var(--k-elevation-shadow-0-0-50px-20px-rgba-0-0-0-0-1);transition:var(--k-motion-transition-background-color-0-3s-ease-color-0-3s-ease)}.klarkUiCustomSwitch>.input{display:none}.klarkUiCustomSwitch>.icon{grid-column:1/1;grid-row:1/1;transition:var(--k-motion-transition-transform-500ms)}.klarkUiCustomSwitch>.icon svg{width:1rem;height:1rem}.klarkUiCustomSwitch>.icon--moon{transform:scale(0)}.klarkUiCustomSwitch>.icon--sun{transform:scale(1)}:root[class~=dark] .klarkUiCustomSwitch{color:var(--k-color-fixed-fff);background-color:var(--k-color-fixed-1a1a1a)}:root[class~=dark] .klarkUiCustomSwitch>.icon--moon{transform:scale(1)}:root[class~=dark] .klarkUiCustomSwitch>.icon--sun{transform:scale(0)}.klarkUiCustomSwitch>.input:checked+.icon--sun{transition-delay:var(--k-motion-default);transform:scale(0) rotate(1turn)}.klarkUiCustomSwitch>.input:checked~.icon--moon{transform:rotate(1turn) scale(1)}