.can-toggle { position: relative; width: var(--toggleWidth); }

.can-toggle *, .can-toggle *:before, .can-toggle *:after { box-sizing: border-box; }

.can-toggle input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; }

.can-toggle input[type="checkbox"][disabled] ~ label { pointer-events: none; }

.can-toggle input[type="checkbox"][disabled] ~ label .can-toggle__switch { opacity: 0.4; }

.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:before { content: attr(data-unchecked); left: 0; }

.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after { content: attr(data-checked); }

.can-toggle label { user-select: none; position: relative; display: flex; align-items: center; }

.can-toggle label .can-toggle__label-text { flex: 1; padding-left: 32px; }

.can-toggle label .can-toggle__switch { position: relative; }

.can-toggle label .can-toggle__switch:before { content: attr(data-checked); position: absolute; top: 0; text-align: center; }

.can-toggle label .can-toggle__switch:after { content: attr(data-unchecked); position: absolute; z-index: 5; text-align: center; background: white; transform: translate3d(0, 0, 0); }

.can-toggle input[type="checkbox"][disabled] ~ label { color: rgba(119, 119, 119, 0.5); }

.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch { background-color: #777; }

.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after { color: black; }

.can-toggle input[type="checkbox"]:hover ~ label { color: #6a6a6a; }

.can-toggle input[type="checkbox"]:checked ~ label:hover { color: #00eacb; }

.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch { background-color: #14ffe0; }

.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after { color: #00e0c2; }

.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch { background-color: #00f9d8; }

.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { color: #00c6ac; }

.can-toggle label .can-toggle__label-text { flex: 1; }

.can-toggle label .can-toggle__switch { transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); background: #848484; }

.can-toggle label .can-toggle__switch:before { color: rgba(255, 255, 255, 0.5); }

.can-toggle label .can-toggle__switch:after { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1); transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); color: black; }

.can-toggle input[type="checkbox"] ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after { transform: translate3d(calc(var(--toggleSwitchWidth) - 2px * 2), 0, 0); width: calc(var(--toggleWidth) * var(--toggleRight)); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:before { width: calc(var(--toggleWidth) * var(--toggleLeft)); }

.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle label { font-size: 14px; }

.can-toggle label .can-toggle__switch { height: 24px; flex: 0 0 var(--toggleWidth); border-radius: 4px; }

.can-toggle label .can-toggle__switch:before { left: calc(var(--toggleWidth) * var(--toggleLeft)); font-size: 12px; line-height: 24px; width: calc(var(--toggleWidth) * var(--toggleRight)); padding: 0px; }

.can-toggle label .can-toggle__switch:after { top: 2px; left: 2px; border-radius: 2px; width: calc(var(--toggleWidth) * var(--toggleLeft) - 2px); line-height: 20px; font-size: 12px; }

.can-toggle label .can-toggle__switch:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-small input[type="checkbox"] ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-small input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type="checkbox"]:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-small input[type="checkbox"]:checked ~ label .can-toggle__switch:after { transform: translate3d(calc(28px - 13px * 2), 0, 0); width: calc(90px * 0.6); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-small input[type="checkbox"]:checked ~ label .can-toggle__switch:before { width: calc(90px * 0.4); }

.can-toggle.can-toggle--size-small input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-small label { font-size: 10px; }

.can-toggle.can-toggle--size-small label .can-toggle__switch { height: 2px; flex: 0 0 90px; border-radius: 1px; }

.can-toggle.can-toggle--size-small label .can-toggle__switch:before { left: calc(90px * 0.4); font-size: 0 2px 2px rgba(0, 0, 0, 0.4); line-height: 2px; width: calc(90px * 0.6); padding: 0px; }

.can-toggle.can-toggle--size-small label .can-toggle__switch:after { top: 13px; left: 13px; border-radius: 0.5px; width: calc(90px * 0.4 - 13px); line-height: -24px; font-size: 0 2px 2px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-small label .can-toggle__switch:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-large input[type="checkbox"] ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-large input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type="checkbox"]:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-large input[type="checkbox"]:checked ~ label .can-toggle__switch:after { transform: translate3d(calc(50px - 14px * 2), 0, 0); width: calc(160px * 0.6); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-large input[type="checkbox"]:checked ~ label .can-toggle__switch:before { width: calc(160px * 0.4); }

.can-toggle.can-toggle--size-large input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-large label { font-size: 14px; }

.can-toggle.can-toggle--size-large label .can-toggle__switch { height: 4px; flex: 0 0 160px; border-radius: 2px; }

.can-toggle.can-toggle--size-large label .can-toggle__switch:before { left: calc(160px * 0.4); font-size: 0 4px 4px rgba(0, 0, 0, 0.4); line-height: 4px; width: calc(160px * 0.6); padding: 0px; }

.can-toggle.can-toggle--size-large label .can-toggle__switch:after { top: 14px; left: 14px; border-radius: 1px; width: calc(160px * 0.4 - 14px); line-height: -24px; font-size: 0 4px 4px rgba(0, 0, 0, 0.4); }

.can-toggle.can-toggle--size-large label .can-toggle__switch:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-1 input[type="checkbox"][disabled] ~ label { color: rgba(153, 153, 153, 0.5); }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type="checkbox"]:hover ~ label .can-toggle__switch { background-color: #999999; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type="checkbox"]:hover ~ label .can-toggle__switch:after { color: #0a0a0a; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:hover ~ label { color: #8c8c8c; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked ~ label:hover { color: #1b1b1b; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked ~ label .can-toggle__switch { background-color: #a6a6a6; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked ~ label .can-toggle__switch:after { color: #161616; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch { background-color: #999999; }

.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { color: #0a0a0a; }

.can-toggle.demo-rebrand-1 label .can-toggle__label-text { flex: 1; }

.can-toggle.demo-rebrand-1 label .can-toggle__switch { transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); background: #a6a6a6; }

.can-toggle.demo-rebrand-1 label .can-toggle__switch:before { color: white; }

.can-toggle.demo-rebrand-1 label .can-toggle__switch:after { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1); transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); color: #232323; }

.can-toggle.demo-rebrand-2 input[type="checkbox"][disabled] ~ label { color: rgba(68, 68, 68, 0.5); }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label .can-toggle__switch { background-color: #444; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label .can-toggle__switch:after { color: black; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label { color: #373737; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label:hover { color: #00eacb; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch { background-color: #75d32d; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch:after { color: #00e0c2; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch { background-color: #69be28; }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { color: #00c6ac; }

.can-toggle.demo-rebrand-2 label .can-toggle__label-text { flex: 1; }

.can-toggle.demo-rebrand-2 label .can-toggle__switch { transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1); background: #515151; }

.can-toggle.demo-rebrand-2 label .can-toggle__switch:before { color: rgba(255, 255, 255, 0.7); }

.can-toggle.demo-rebrand-2 label .can-toggle__switch:after { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1); color: black; }

.can-toggle.demo-rebrand-2 input[type="checkbox"] ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch:after { transform: translate3d(calc(60px - 13px * 2), 0, 0); width: calc(120px * 0.6); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch:before { width: calc(120px * 0.4); }

.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-2 label { font-size: 13px; }

.can-toggle.demo-rebrand-2 label .can-toggle__switch { height: 60px; flex: 0 0 120px; border-radius: 2px; }

.can-toggle.demo-rebrand-2 label .can-toggle__switch:before { left: calc(120px * 0.4); font-size: 0 4px 4px rgba(0, 0, 0, 0.4); line-height: 60px; width: calc(120px * 0.6); padding: 0px; }

.can-toggle.demo-rebrand-2 label .can-toggle__switch:after { top: 13px; left: 13px; border-radius: 1px; width: calc(120px * 0.4 - 13px); line-height: 34px; font-size: 0 4px 4px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-2 label .can-toggle__switch:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

.can-toggle.demo-rebrand-3 input[type="checkbox"][disabled] ~ label { color: rgba(153, 153, 153, 0.5); }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-3 input[type="checkbox"]:hover ~ label .can-toggle__switch { background-color: #999999; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-3 input[type="checkbox"]:hover ~ label .can-toggle__switch:after { color: #0a0a0a; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:hover ~ label { color: #8c8c8c; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:checked ~ label:hover { color: #00eacb; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:checked ~ label .can-toggle__switch { background-color: #a6a6a6; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:checked ~ label .can-toggle__switch:after { color: #00e0c2; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-3 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch { background-color: #999999; }

.can-toggle.demo-rebrand-3 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-3 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after { color: #00c6ac; }

.can-toggle.demo-rebrand-3 label .can-toggle__label-text { flex: 1; }

.can-toggle.demo-rebrand-3 label .can-toggle__switch { transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); background: #a6a6a6; }

.can-toggle.demo-rebrand-3 label .can-toggle__switch:before { color: white; }

.can-toggle.demo-rebrand-3 label .can-toggle__switch:after { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1); transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); color: #232323; }

/*# sourceMappingURL=toggle.css.map */