.fn-switch-new{position:relative;z-index:0;display:inline-flex;overflow:hidden;box-sizing:border-box}.fn-switch-new__overlay--medium,.fn-switch-new__overlay--small{position:absolute;left:0;top:0;z-index:1;border-radius:50%;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}.fn-switch-new__dot--medium,.fn-switch-new__dot--small{z-index:1;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:left 150ms cubic-bezier(.4,0,.2,1) 0s,transform 150ms cubic-bezier(.4,0,.2,1) 0s;background-color:var(--fn-switch--dot-color);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.fn-switch-new__overlay--medium{width:38px;height:38px}.fn-switch-new__overlay--small{width:38px;height:38px}.fn-switch-new__dot--medium{width:20px;height:20px}.fn-switch-new__dot--small{width:16px;height:16px}.fn-switch-new--medium{width:58px;height:38px;padding:13px}.fn-switch-new--small{width:58px;height:38px;padding:14px}.fn-switch-new__input{position:absolute;cursor:pointer;width:200%;height:100%;left:-50%;top:0;z-index:1;opacity:0}@media (any-hover:hover){.fn-switch-new__input:not([disabled]):hover{cursor:pointer;background-color:color-mix(in srgb,var(--fn-switch--dot-hover-color) var(--md-sys-state-hover-state-layer-opacity-percentage),var(--fn-sys-color-switch) var(--fn-zero-percentage))}.fn-switch-new__input:is([disabled]){cursor:default}}.fn-switch-new--enabled:hover{background-color:color-mix(in srgb,var(--fn-switch--dot-hover-color) var(--md-sys-state-hover-state-layer-opacity-percentage),var(--fn-sys-color-switch) var(--fn-zero-percentage))}.fn-switch-new--active{transform:translateX(20px)}.fn-switch-new__track{width:100%;height:100%;border-radius:7px;background-color:var(--fn-switch--track-color);opacity:.5;z-index:-1;transition:all .2s ease-in-out}