@cloud-ru/ds-toggles 1.0.0

package/dist/esm/style.css

@@ -0,0 +1,849 @@
+@charset "UTF-8";
+.inputPrivate{
+  cursor:pointer;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.inputPrivate:disabled{
+  cursor:not-allowed;
+}
+
+.backgroundStateLayer{
+  border-radius:0 !important;
+  visibility:initial;
+}
+
+.framing{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.framing[data-loading=false]{
+  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  border-style:solid;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.framing[data-loading=false][data-disabled=true]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.framing[data-loading=false][data-disabled=true][data-checked=true]{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-loading=false][data-disabled=false][data-checked=false]{
+  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-loading=false][data-disabled=false][data-checked=true]{
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.flag{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.surface{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.icon{
+  position:absolute;
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  vertical-align:middle;
+}
+.root[data-size=xs] .container{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing{
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=xs] .flag{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-size=xs] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=s] .container{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .framing{
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-size=s] .flag{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
+}
+.root[data-size=s] .surface{
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root[data-loading=false][data-disabled=false] .container{
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root[data-loading=false][data-disabled=false][data-size=xs] .backgroundStateLayer{
+  inset:calc(-1 * var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px))));
+}
+.root[data-loading=false][data-disabled=false][data-size=s] .backgroundStateLayer{
+  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
+}
+.root[data-loading=true] .flag{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}
+@charset "UTF-8";
+.inputPrivate{
+  cursor:pointer;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.inputPrivate:disabled{
+  cursor:not-allowed;
+}
+
+.backgroundStateLayer{
+  border-radius:0 !important;
+  visibility:initial;
+}
+
+.flag{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.framing{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.surface{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.icon{
+  position:absolute;
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.icon[data-checked=true][data-variant=star]{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.icon[data-checked=true][data-variant=heart]{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.icon[data-checked=true][data-disabled=true]{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  vertical-align:middle;
+}
+.root[data-size=xs] .container{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .flag{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-size=xs] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=s] .container{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .framing{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+}
+.root[data-size=s] .flag{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
+}
+.root[data-size=s] .surface{
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-loading=false][data-disabled=false] .container .framing [data-text-opacity]{
+  opacity:var(--sn-theme-color-material-stateLayer-text-default-opacity, 1);
+}
+@media (hover: hover){
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .framing [data-text-opacity]{
+    opacity:var(--sn-theme-color-material-stateLayer-text-hovered-opacity, 0.85);
+  }
+}
+.root[data-loading=false][data-disabled=false] .container{
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .framing [data-text-opacity], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .framing [data-text-opacity], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .framing [data-text-opacity]{
+  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
+}
+.root[data-loading=true] .flag{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.root[data-disabled=true] .framing{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.root[data-focusvisible=true] .framing{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+@charset "UTF-8";
+.inputPrivate{
+  cursor:pointer;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.inputPrivate:disabled{
+  cursor:not-allowed;
+}
+
+.backgroundStateLayer{
+  visibility:initial;
+}
+
+.framing{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.framing[data-loading=false]{
+  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  border-style:solid;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.framing[data-loading=false][data-disabled=true]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.framing[data-loading=false][data-disabled=false][data-checked=false]{
+  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-loading=false][data-disabled=false][data-checked=true]{
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.flag{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.surface{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.surface[data-loading=false][data-checked=true][data-disabled=false]{
+  background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.surface[data-loading=false][data-checked=true][data-disabled=true]{
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  vertical-align:middle;
+}
+.root[data-size=xs] .container{
+  min-width:var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing{
+  width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  border-width:var(--sn-toggles-anatomy-size-xs-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=xs] .flag{
+  min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-size=xs] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-width, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-height, var(--sn-primitive-dimension-8, 8px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  border-width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=s] .container{
+  min-width:var(--sn-toggles-anatomy-size-s-radio-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-toggles-anatomy-size-s-radio-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .framing{
+  width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-radio-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-radio-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  border-width:var(--sn-toggles-anatomy-size-s-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-size=s] .flag{
+  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px)));
+  min-height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
+}
+.root[data-size=s] .surface{
+  width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-width, var(--sn-primitive-dimension-10, 10px));
+  height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-height, var(--sn-primitive-dimension-10, 10px));
+  border-radius:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  border-width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root[data-loading=false][data-disabled=false] .container{
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root[data-loading=false][data-disabled=false][data-size=xs] .backgroundStateLayer{
+  inset:calc(-1 * var(--sn-toggles-anatomy-size-xs-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px))));
+}
+.root[data-loading=false][data-disabled=false][data-size=s] .backgroundStateLayer{
+  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
+}
+.root[data-loading=true] .flag{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}
+@charset "UTF-8";
+.spinner{
+  flex-shrink:0;
+}
+
+.icon{
+  pointer-events:none;
+  position:absolute;
+  transform:scale(0.72);
+  opacity:0;
+  transition:opacity 0.1s cubic-bezier(0.33, 1, 0.68, 1), transform 0.1s cubic-bezier(0.33, 1, 0.68, 1), color 0.1s linear;
+}
+
+.surface[data-checked=true]:not([data-loading=true]) .icon{
+  transform:scale(1);
+  opacity:1;
+}
+
+.inputPrivate{
+  cursor:pointer;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.inputPrivate:disabled{
+  cursor:not-allowed;
+}
+
+.backgroundStateLayer{
+  visibility:initial;
+}
+
+.flag{
+  position:absolute;
+  top:50%;
+  left:0;
+  transform:translateY(-50%);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  transition:left 0.1s linear;
+}
+
+.framing{
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  outline-style:solid;
+  transition:background-color 0.1s linear, outline-color 0.1s linear;
+}
+.framing[data-checked=false]{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-checked=true][data-disabled=false]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.framing[data-checked=true][data-disabled=true]{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-disabled=true]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.surface{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  transition:width 0.1s linear, height 0.1s linear, background-color 0.1s linear, color 0.1s linear;
+}
+.surface[data-checked=false][data-loading=false]{
+  background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.surface[data-checked=false][data-disabled=false][data-loading=true]{
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.surface[data-checked=true][data-loading=false]{
+  background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.surface[data-checked=true][data-loading=false][data-disabled=false]{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.surface[data-checked=true][data-loading=false][data-disabled=true]{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.surface[data-checked=true][data-loading=true]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+
+.root{
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  vertical-align:middle;
+}
+.root[data-size=xs] .container{
+  min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing{
+  width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
+  outline-width:var(--sn-toggles-anatomy-size-xs-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+  outline-offset:calc(0px - var(--sn-toggles-anatomy-size-xs-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px))));
+}
+.root[data-size=xs] .flag{
+  min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing[data-checked=true] .flag{
+  left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-size=xs][data-focusvisible=true] .container{
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+}
+.root[data-size=xs][data-checked=false] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-12, 12px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=xs][data-checked=true] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-12, 12px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=s] .container{
+  min-width:var(--sn-toggles-anatomy-size-s-switch-container-minWidth, var(--sn-primitive-dimension-36, 36px));
+  min-height:var(--sn-toggles-anatomy-size-s-switch-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .framing{
+  width:var(--sn-toggles-anatomy-size-s-switch-framing-minWidth, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
+  outline-width:var(--sn-toggles-anatomy-size-s-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+  outline-offset:calc(0px - var(--sn-toggles-anatomy-size-s-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
+}
+.root[data-size=s] .flag{
+  min-width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
+  min-height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-minHeight, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
+}
+.root[data-size=s] .framing[data-checked=true] .flag{
+  left:calc(100% - var(--sn-toggles-anatomy-size-s-switch-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px))));
+}
+.root[data-size=s][data-focusvisible=true] .container{
+  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+}
+.root[data-size=s][data-checked=false] .surface{
+  width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
+  border-width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-size=s][data-checked=true] .surface{
+  width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedTrue-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  border-width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedTrue-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root[data-loading=false][data-disabled=false] .container{
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}