:root{--f7-toggle-handle-color:#fff}:root .theme-dark,:root.theme-dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .theme-dark,.ios.theme-dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);right:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}