.can-toggle {
    --ts-width: 64px;
    --ts-height: 36px;
    --ts-offset: 2px;
    --ts-font-size: 12px;
    --ts-border-radius-ext: 4px;
    --ts-border-radius-int: 2px;
    --ts-color-disabled: rgba(119, 119, 119, 0.5);
    --ts-bg-color: #848484;
    --ts-thumb-bg-color: #fff;
    --ts-thumb-color: #777;
    --ts-thumb-color-hover: #5e5e5e;
    --ts-thumb-color-checked: #4fb743;
    --ts-thumb-bg-color-checked-hover: #47a43d;
    --ts-color: rgba(255, 255, 255, 0.5);
    --ts-bg-color-hover: #777;
    --ts-color-hover: #6a6a6a;
    --ts-color-checked-hover: #55bc49;
    --ts-bg-color-checked: #70c767;
    --ts-bg-color-checked-hover: #5fc054;
    --ts-box-shadow: 0 3px 3px;
    position: relative;
    display: flex;
  }
  .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.6;
  }
  .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 {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
  }
  .can-toggle label .can-toggle__label-text {
    flex: 1;
    padding-left: 16px;
  }
  .can-toggle label .can-toggle__switch {
    position: relative;
  }
  
  .can-toggle label .can-toggle__switch {
    display: flex;
    justify-content: space-around;
    align-items: center;
    isolation: isolate;
  }
  
  .can-toggle label .can-toggle__switch figure {
    display: flex;
    align-items: center;
    margin-inline: 0;
    margin-block: 0;
    z-index: 1;
  }
  
  .can-toggle label .can-toggle__switch:before {
    content: attr(data-checked);
    position: absolute;
    text-transform: uppercase;
    text-align: center;
  }
  .can-toggle label .can-toggle__switch:after {
    content: attr(data-unchecked);
    position: absolute;
    z-index: 0;
    text-transform: uppercase;
    text-align: center;
    background: var(--ts-thumb-bg-color, white);
    transform: translate3d(0, 0, 0);
  }
  .can-toggle input[type="checkbox"][disabled] ~ label {
    color: var(--ts-color-disabled);
  }
  .can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch,
  .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch {
    background-color: var(--ts-bg-color-hover);
  }
  .can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after,
  .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
    color: var(--ts-thumb-color-hover, #5e5e5e);
  }
  .can-toggle input[type="checkbox"]:hover ~ label {
    color: var(--ts-color-hover, #6a6a6a);
  }
  .can-toggle input[type="checkbox"]:checked ~ label:hover {
    color: var(--ts-color-checked-hover, #55bc49);
  }
  .can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch {
    background-color: var(--ts-bg-color-checked, #70c767);
  }
  .can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
    color: var(--ts-thumb-color-checked, #4fb743);
  }
  
  .can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch,
  .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch {
    background-color: var(--ts-bg-color-checked-hover, #5fc054);
  }
  .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: var(--ts-thumb-bg-color-checked-hover, #47a43d);
  }
  
  .can-toggle label .can-toggle__switch {
    transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
    background: var(--ts-bg-color, #848484);
  }
  .can-toggle label .can-toggle__switch:before {
    color: var(--ts-color, rgba(255, 255, 255, 0.5));
  }
  .can-toggle label .can-toggle__switch:after {
    transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
    color: var(--ts-thumb-color, #777);
  }
  .can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after,
  .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
    box-shadow: var(--ts-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(--ts-width) + var(--ts-offset) / 2), 0, 0);
  }
  .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: var(--ts-box-shadow, 0 3px 3px) rgba(0, 0, 0, 0.4);
  }
  .can-toggle label {
    font-size: 14px;
  }
  .can-toggle label .can-toggle__switch {
    height: var(--ts-height);
    flex: 0 0 calc(var(--ts-width) * 2 + var(--ts-offset) * 2);
    border-radius: var(--ts-border-radius-ext);
  }
  .can-toggle label .can-toggle__switch:before {
    left: calc(var(--ts-width) + var(--ts-offset) / 2);
    font-size: var(--ts-font-size);
    line-height: var(--ts-height);
    width: calc(var(--ts-width) + var(--ts-offset) / 2);
  }
  .can-toggle label .can-toggle__switch:after {
    left: var(--ts-offset);
    border-radius: var(--ts-border-radius-int);
    width: calc(var(--ts-width) - calc(var(--ts-offset) / 2));
    line-height: calc(var(--ts-height) - calc(var(--ts-offset) * 2));
    font-size: var(--ts-font-size);
    height: calc(100% - calc(var(--ts-offset) * 2));
  }
  .can-toggle label .can-toggle__switch:hover:after {
    box-shadow: var(--ts-box-shadow, 0 3px 3px) rgba(0, 0, 0, 0.4);
  }
  
  .can-toggle.can-toggle--size-small label {
    font-size: 13px;
  }
  .can-toggle.can-toggle--size-small {
    --ts-width: 45px;
    --ts-offset: 1px;
    --ts-height: 28px;
    --font-size: 10px;
    --ts-border-radius-ext: 2px;
    --ts-border-radius-int: 1px;
    --ts-box-shadow: 0 2px 2px;
  }
  
  .can-toggle.can-toggle--size-large {
    --ts-width: 65px;
    --ts-offset: 2px;
    --ts-height: 50px;
    --font-size: 14px;
    --ts-border-radius-ext: 4px;
    --ts-border-radius-int: 2px;
    --ts-bg-color: #c14b81;
    --ts-color: rgba(255, 255, 255, 0.5);
    --ts-thumb-color: #b53e74;
    --ts-bg-color-hover: #b53e74;
    --ts-thumb-color-hover: #a23768;
    --ts-color-hover: #8f315c;
    --ts-color-checked-hover: #39916a;
    --ts-bg-color-checked: #44ae7f;
    --ts-thumb-color-checked: #2f7757;
    --ts-bg-color-checked-hover: #3d9c72;
    --ts-box-shadow: 0 4px 4px;
  }
  .can-toggle.can-toggle--size-large label {
    font-size: 14px;
  }
  
  .can-toggle.can-toggle--rounded {
    --ts-offset: 2px;
    --ts-height: calc(64px + 2 * var(--ts-offset));
    --ts-width: calc(
      var(--ts-height) - (var(--ts-offset) + (var(--ts-offset) / 2))
    );
    --ts-font-size: 16px;
    --ts-border-radius-ext: 64px;
    --ts-border-radius-int: 64px;
    --ts-box-shadow: 0 4px 4px;
  }
  
  .can-toggle.can-toggle--pill label {
    font-size: 13px;
  }
  .can-toggle.can-toggle--pill {
    --icon-w: 32px;
    --icon-h: 32px;
    --ts-width: 60px;
    --ts-offset: 2px;
    --ts-height: 40px;
    --ts-font-size: 13px;
    --ts-border-radius-ext: 60px;
    --ts-border-radius-int: 60px;
    --ts-color-disabled: rgba(68, 68, 68, 0.5);
    --ts-bg-color: #607ceb;
    --ts-color: rgb(30 30 108 / 72%);
    --ts-thumb-color: #444;
    --ts-bg-color-hover: #4d62b3;
    --ts-thumb-color-hover: #2b2b2b;
    --ts-color-hover: #6a6a6a;
    --ts-color-checked-hover: #4d62b3;
    --ts-bg-color-checked: #607ceb;
    --ts-thumb-color-checked: #607ceb;
    --ts-bg-color-checked-hover: #4d62b3;
    --ts-box-shadow: 0 4px 4px;
  }
  
  .can-toggle__switch svg {
    width: var(--icon-w);
    height: var(--icon-h);
    color: var(--ts-color);
  }