<svelte:options
  customElement={{
    tag: 'm-toggle',
    props: {
      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
    },
    extend: customElementForwardEvents,
  }}
/>

<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the toggle, used to associate the label with the form element.
     */
    id: string;
    /**
     * The name attribute for the toggle element, typically used for form submission.
     */
    name?: string;
    /**
     * The text label displayed next to the toggle.
     */
    label?: string;
    /**
     * The toggle's checked state.
     */
    checked?: boolean;
    /**
     * Determines the size of the toggle.
     */
    size?: 's' | 'm';
    /**
     * If `true`, disables the toggle, making it non-interactive.
     */
    disabled?: boolean;
  }

  let {
    id,
    name,
    label,
    checked = $bindable(false),
    disabled,
    size = 's',
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div class={['mc-toggle', `mc-toggle--${size}`, className]}>
  <label class="mc-toggle__container" for={id}>
    <input
      {id}
      type="checkbox"
      class="mc-toggle__input"
      {name}
      {disabled}
      bind:checked
      {...attrs}
    />
    {#if label}
      <span class="mc-toggle__label">{label}</span>
    {/if}
  </label>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-toggle {
  width: fit-content;
}
.mc-toggle__container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
  position: relative;
  padding: 0.25rem;
}
.mc-toggle__container::before, .mc-toggle__container::after {
  content: "";
}
.mc-toggle__container::before {
  transition: box-shadow 200ms ease;
  height: 1.5rem;
  width: 2.5rem;
  background-color: var(--forms-color-background-unchecked, #666666);
  border-radius: var(--border-radius-l, 1rem);
  flex-shrink: 0;
}
.mc-toggle__container::after {
  height: 1.25rem;
  width: 1.25rem;
  background-color: var(--forms-color-icon-inverse, #ffffff);
  border-radius: var(--border-radius-full, 100%);
  background-position: center;
  left: 0.375rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.mc-toggle__input {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  padding: 0;
  width: 1px;
}
.mc-toggle__label {
  color: var(--forms-color-text-default, #000000);
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-m, 1.5);
}
.mc-toggle:has(:checked) .mc-toggle__container::before {
  background-color: var(--forms-color-background-checked, #117f03);
}
.mc-toggle:has(:checked) .mc-toggle__container::after {
  transform: translate(1rem, -50%);
}
.mc-toggle:has(:disabled) .mc-toggle__container {
  cursor: not-allowed;
}
.mc-toggle:has(:disabled) .mc-toggle__container::before {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
}
.mc-toggle:has(:disabled) .mc-toggle__container::after {
  background-color: var(--forms-color-icon-disabled, #737373);
}
.mc-toggle:has(:disabled) .mc-toggle__label {
  color: var(--forms-color-text-disabled, #737373);
}
.mc-toggle:has(:focus-visible) .mc-toggle__container::before {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-toggle--m .mc-toggle__container::before {
  height: 2rem;
  width: 3.5rem;
}
.mc-toggle--m .mc-toggle__container::after {
  height: 1.5rem;
  width: 1.5rem;
  left: 0.5rem;
}
.mc-toggle--m:has(:checked) .mc-toggle__container::after {
  transform: translate(1.5rem, -50%);
}
.mc-toggle--hide-label .mc-toggle__label {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  padding: 0;
  width: 1px;
}</style>
