.toggle-switch{cursor:pointer;--toggle-bg:hsl(var(--red));--toggle-text:hsl(var(--white));--toggle-border:hsl(var(--red));--toggle-switch-bg:hsl(var(--grey-wild-sand));width:4.375rem;height:2.375rem;display:block;position:relative}.toggle-switch__wrapper{align-items:center;display:flex}.toggle-switch__indicator{background-color:var(--toggle-bg);border:.09375rem solid var(--toggle-border);color:var(--toggle-text);border-radius:9em;align-items:center;font-size:.875rem;font-weight:700;line-height:1;display:flex;position:absolute;inset:0}.toggle-switch__indicator:before{z-index:1;content:"";background-color:var(--toggle-switch-bg);width:2rem;height:2rem;box-shadow:0 4px 5px 0 hsl(var(--black)/.14), 0 1px 10px 0 hsl(var(--black)/.12), 0 2px 4px -1px hsl(var(--black)/.2);border-radius:100%;transition:transform .25s,background-color .25s;position:absolute;transform:translate(.1875rem)}.toggle-switch__indicator:after{content:attr(data-status-off);margin-top:-.0625rem;position:absolute;right:.4375rem}.toggle-switch__indicator--outlined{--toggle-bg:transparent;--toggle-text:hsl(var(--red-coral));--toggle-border:hsl(var(--white));--toggle-switch-bg:hsl(var(--red-coral))}.toggle-switch__input:checked+.toggle-switch__indicator,.toggle-switch__input:active+.toggle-switch__indicator{--toggle-bg:hsl(var(--light-green-foerderpenny));--toggle-border:hsl(var(--light-green-foerderpenny))}.toggle-switch__input:checked+.toggle-switch__indicator:before,.toggle-switch__input:active+.toggle-switch__indicator:before{transform:translate(calc(100% + .125rem))}.toggle-switch__input:checked+.toggle-switch__indicator:after,.toggle-switch__input:active+.toggle-switch__indicator:after{content:attr(data-status-on);left:.625rem;right:auto}.toggle-switch__input:checked+.toggle-switch__indicator--outlined,.toggle-switch__input:active+.toggle-switch__indicator--outlined{--toggle-text:hsl(var(--green-freshmint));--toggle-switch-bg:hsl(var(--green-freshmint));--toggle-border:hsl(var(--white));border-color:hsl(var(--white));background-color:#0000}.toggle-switch__input:focus-visible+.toggle-switch__indicator{box-shadow:0 8px 10px 1px hsl(var(--black)/.14), 0 3px 14px 2px hsl(var(--black)/.12), 0 5px 5px -3px hsl(var(--black)/.2)}.toggle-switch__label{flex:1;margin-left:.5rem}