@ozen-ui/kit/__inner__/cjs/components/ToggleNext/Toggle.css

React component library

.ToggleNext {
  --toggle-ball-translate-x: var(--toggle-switch-ball-padding);
}

  .ToggleNext_size_s,
  .ToggleNext_size_xs,
  .ToggleNext_size_2xs {
    --toggle-switch-inline-size: 30px;
    --toggle-switch-block-size: 16px;
    --toggle-switch-border-radius: 30px;
    --toggle-switch-ball-size: 14px;
    --toggle-switch-ball-padding: 1px;
  }

  .ToggleNext_size_m,
  .ToggleNext_size_l {
    --toggle-switch-inline-size: 44px;
    --toggle-switch-block-size: 24px;
    --toggle-switch-border-radius: 44px;
    --toggle-switch-ball-size: 20px;
    --toggle-switch-ball-padding: 2px;
  }

  .ToggleNext_size_m {
    --form-control-carcass-control-block-margin: 0;
  }

  .ToggleNext_size_l {
    --form-control-carcass-control-block-margin: var(--spacing-4xs);
  }

  .ToggleNext_variant_default {
    --toggle-background-color: var(--color-background-tertiary);
    --toggle-background-color-checked: var(--color-background-action);
    --toggle-background-color-hover: var(--color-background-tertiary-hover);
    --toggle-background-color-hover-checked: var(--color-background-action-hover);
    --toggle-background-color-active: var(--color-background-tertiary-pressed);
    --toggle-background-color-active-checked: var(--color-background-action-pressed);
  }

  .ToggleNext_variant_error {
    --toggle-background-color: var(--color-background-error-light);
    --toggle-background-color-checked: var(--color-background-error);
    --toggle-background-color-hover: var(--color-background-error-light);
    --toggle-background-color-hover-checked: var(--color-background-error);
    --toggle-background-color-active: var(--color-background-error-light);
    --toggle-background-color-active-checked: var(--color-background-error);
  }

  .ToggleNext_disabled {
    pointer-events: none;
  }

  .ToggleNext_disabled .ToggleNext-Switch {
      background-color: var(--color-background-disabled);
    }

  .ToggleNext_disabled .ToggleNext-Input:checked + .ToggleNext-Switch {
      background-color: var(--color-background-action-active-disabled);
    }

  .ToggleNext-Box {
    display: inline-flex;
    position: relative;
  }

  .ToggleNext-Input {
    position: absolute;
    margin: 0;
    opacity: 0;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100%;
    cursor: pointer;
    z-index: var(--z-index-absolute);
  }

  .ToggleNext-Input:hover:not(:disabled) + .ToggleNext-Switch {
      background-color: var(--toggle-background-color-hover);
    }

  .ToggleNext-Input:hover:checked + .ToggleNext-Switch {
      background-color: var(--toggle-background-color-hover-checked);
    }

  .ToggleNext-Input:active:not(:disabled) + .ToggleNext-Switch {
      background-color: var(--toggle-background-color-active);
    }

  .ToggleNext-Input:active:checked + .ToggleNext-Switch {
      background-color: var(--toggle-background-color-active-checked);
    }

  .ToggleNext-Input:checked + .ToggleNext-Switch {
      --toggle-ball-translate-x: calc(var(--toggle-switch-inline-size) - var(--toggle-switch-ball-size) - var(--toggle-switch-ball-padding));
      background-color: var(--toggle-background-color-checked);
    }

  .ToggleNext-Input:focus + .ToggleNext-Switch {
      box-shadow: var(--shadow-outline-focused);
    }

  .ToggleNext-Input:focus:not(:focus-visible) + .ToggleNext-Switch {
      box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
    }

  .ToggleNext-Switch {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    inline-size: var(--toggle-switch-inline-size);
    block-size: var(--toggle-switch-block-size);
    border-radius: calc(var(--toggle-switch-border-radius) / 2);
    background-color: var(--toggle-background-color);
    transition: var(--transition-default);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
  }

  .ToggleNext-Switch::before {
      position: absolute;
      content: '';
      background-color: var(--color-background-main);
      block-size: var(--toggle-switch-ball-size);
      inline-size: var(--toggle-switch-ball-size);
      box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
      transition: var(--transition-default);
      border-radius: 50%;
      inset-block-start: 50%;
      transform: translate(var(--toggle-ball-translate-x), -50%);
    }