.toggle-atom.theme-default {
  border-radius: 12px;
  transition: box-shadow .3s, background-color .3s, border-color .3s;
  box-shadow: 0 0 0 2px transparent;
  box-sizing: border-box;
  cursor: pointer;
  padding: 2px 3px 3px 2px;
  border: 1px;
  border-style: solid;
}

.toggle-atom.theme-default.size-normal {
  width: 48px;
  height: 24px;
  background-color: var(--endpass-ui-color-grey-4);
  border-color: var(--endpass-ui-color-grey-4);
}

.toggle-atom.theme-default.size-mini {
  width: 32px;
  height: 16px;
  background-color: var(--endpass-ui-color-grey-3);
  border-color: var(--endpass-ui-color-grey-3);
}

.toggle-atom.theme-default.is-checked.skin-primary {
  background-color: var(--endpass-ui-color-success);
  border-color: var(--endpass-ui-color-success);
}

.toggle-atom.theme-default.is-checked.skin-secondary {
  background-color: var(--endpass-ui-color-primary-7);
  border-color: var(--endpass-ui-color-primary-7);
}

.toggle-atom.theme-default:focus-within {
  box-shadow: 0 0 0 2px var(--endpass-ui-color-primary-7);
}

.toggle-atom.theme-default .toggle-atom-handle {
  background-color: var(--endpass-ui-color-white);
  border-radius: 50%;
  display: inline-block;
  vertical-align: top;
  transition: margin-left .3s;
}

.toggle-atom.theme-default.is-disabled .toggle-atom-handle {
  background-color: var(--endpass-ui-color-grey-2);
}

.toggle-atom.theme-default.size-normal .toggle-atom-handle {
  width: 18px;
  height: 18px;
}

.toggle-atom.theme-default.size-mini .toggle-atom-handle {
  width: 10px;
  height: 10px;
}

.toggle-atom.theme-default.size-normal.is-checked .toggle-atom-handle {
  margin-left: 24px;
}

.toggle-atom.theme-default.size-mini.is-checked .toggle-atom-handle {
  margin-left: 16px;
}

.toggle-atom.theme-default.is-disabled {
  background-color: var(--endpass-ui-color-grey-1);
  border-color: var(--endpass-ui-color-grey-2);
  cursor: default;
}