@zohodesk/components/lib/Switch/Switch.module.css

In this Package, we Provide Some Basic Components to Build Web App

.varClass {
  /* switch default variables */
  --switch_off_bg_color: var(--zdt_switch_default_off_bg);
  --switch_on_bg_color: var(--zdt_switch_default_on_bg);

  /* switch circle default variables */
  --switch_circle_bg_color: var(--zdt_switch_circle_bg);
  --switch_circle_border_radius: 50px;
  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
}

.container {
  composes: varClass;
  vertical-align: middle;
}

.disabled {
  composes: disabled from '../common/common.module.css';
}

.readonly {
  composes: readonly from '../common/common.module.css';
}

.label {
  display: inline-block;
  position: relative;
  transition: box-shadow var(--zd_transition3) ease-in-out;
  background-color: var(--switch_off_bg_color);
  border-radius: 20px;
  cursor: pointer;
}

.effect:hover .label

/* .effect:focus .label */
  {
  --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
}
.label:after {
  content: '';
  display: block;
  position: absolute;
  right: 50% ;
  transition: all var(--zd_transition2);
  box-shadow: var(--switch_cricle_box_shadow);
  background-color: var(--switch_circle_bg_color);
  border-radius: var(--switch_circle_border_radius);
}

.checked+.label {
  box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
}

.checked+.label:after {
  right: calc( var(--zd_size1) * -1 ) ;
}

.input {
  display: none;
}

.small {
  height: var(--zd_size14) ;
  width: var(--zd_size28) ;
}
.switch_smallLabel {
  height: var(--zd_size9) ;
  width: var(--zd_size22) ;
  top: calc( var(--zd_size2) * -1 ) ;
  left: var(--zd_size2) ;
}
.switch_smallLabel:after {
  width: var(--zd_size12) ;
  height: var(--zd_size12) ;
  top: calc( var(--zd_size2) * -1 ) ;
}

.medium {
  height: var(--zd_size18) ;
  width: var(--zd_size34) ;
}
.switch_mediumLabel {
  height: var(--zd_size13) ;
  width: var(--zd_size31) ;
  top: var(--zd_size2) ;
  left: var(--zd_size2) ;
}
.switch_mediumLabel:after {
  width: var(--zd_size18) ;
  height: var(--zd_size18) ;
  top: calc( var(--zd_size3) * -1 ) ;
}

.input:disabled+.label {
  opacity: 0.4;
  border-color: var(--zdt_switch_default_off_bg);
  cursor: not-allowed;
}

.switch {
  display: inline-block;
  composes: offSelection from '../common/common.module.css';
  vertical-align: middle;
}

.switch_small {
  composes: small;
  composes: switch;
}

.switch_medium {
  composes: medium;
  composes: switch;
}

.switch+label {
  position: relative;
  top: calc( var(--zd_size1) * -1 ) ;
}

[dir=ltr] .switch+label {
  margin-left: var(--zd_size12) ;
}

[dir=rtl] .switch+label {
  margin-right: var(--zd_size12) ;
}