.mp-toggle(class={
  'toggle-blue': $attrs[`color`] === `blue` || $attrs[`blue`],
  'toggle-grey': $attrs[`color`] === `grey`,
  'toggle-large': $attrs[`size`] === `large` || $attrs[`large`],
  'toggle-small': $attrs[`size`] === `small` || $attrs[`small`],
  'toggle-square': $attrs[`square`],
  'theme-lite': $attrs[`theme`] === `lite`,
})
  for toggleOption in $helpers.toggleOptions()
    - const {icon, iconSide, text} = toggleOption
    - const hasTextAndIcon = icon && text.length;
    .mp-toggle-option(
      class={
        'mp-toggle-selected': toggleOption.value === $component.value,
        'mp-toggle-disabled': toggleOption.disabled,
        'mp-toggle-error': toggleOption.error,
        'mp-toggle-text-and-icon': hasTextAndIcon,
      }
      on={click: () => toggleOption.disabled ? null : $helpers.selectOption(toggleOption.value)}
    )
      if hasTextAndIcon
        //- to ensure that the toggle-text always remains in the middle we put the icon
        //- on both sides of the text and hide the one we do not want to see
        svg-icon(attrs={icon}, class={hidden: iconSide === `right`})
        span.toggle-text= toggleOption.text
        svg-icon(attrs={icon}, class={hidden: iconSide === `left`})
      else if icon
        svg-icon(attrs={icon})
      else 
        span.toggle-text= toggleOption.text