export default {
  root: ({ props, parent }) => ({
    class: [
      // Layout
      'flex items-center self-stretch shrink-0 grow',

      // Spacing
      'py-[3.5px] px-3 space-x-1',

      // Size
      'h-full max-h-[26px]',

      // Background
      // 'bg-white',
      // {
      //   'bg-general-50 dark:bg-general-50': props.disabled,
      // },

      // Border
      // 'rounded',

      // Text Color
      'text-xs font-medium leading-[16.39px] tracking-[0.02em]',
      {
        'text-general-800 dark:text-general-100': !props.disabled,
        'text-general-200 dark:text-general-200': props.disabled,
      },

      // { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },

      // //Sizing
      // { '!w-16': props.showButtons && props.buttonLayout == 'vertical' },

      // Shape
      // {
      //   'first:rounded-l-md rounded-none last:rounded-r-md':
      //     parent.instance.$name == 'InputGroup' && !props.showButtons,
      // },
      // {
      //   'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600':
      //     parent.instance.$name == 'InputGroup' && !props.showButtons,
      // },

      // {
      //   'ring-1 ring-surface-300 dark:ring-surface-700 ring-offset-0':
      //     parent.instance.$name !== 'InputGroup',
      // },
      'appearance-none',
    ],
  }),
  input: {
    root: ({ parent }) => ({
      class: [
        'border-0 h-full w-full outline-none',
        'bg-inherit',
        'placeholder:text-general-200 placeholder:font-light text-inherit tracking-[0.24px]',

        // Display
        // 'flex flex-auto',

        //Text
        // 'sm:text-sm',
        // {
        //   'text-center':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },

        // Spacing
        // 'm-0',
        // 'py-1.5 px-3',

        // Shape
        // 'rounded-md',
        // { 'rounded-tr-none rounded-br-none': parent.props.showButtons },
        // {
        //   'rounded-tl-none rounded-bl-none':
        //     parent.props.showButtons &&
        //     parent.props.buttonLayout == 'horizontal',
        // },
        // {
        //   'rounded-none':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },

        // Colors
        // 'text-surface-900 dark:text-surface-0',
        // 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
        // 'bg-surface-0 dark:bg-surface-900',
        // {
        //   'border-r border-surface-300 dark:border-surface-700':
        //     parent.props.showButtons && parent.props.buttonLayout == 'stacked',
        // },
        // {
        //   'border-x border-surface-300 dark:border-surface-700':
        //     parent.props.showButtons &&
        //     parent.props.buttonLayout == 'horizontal',
        // },
        // {
        //   'border-y border-surface-300 dark:border-surface-700':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },

        // States
        // 'outline-none focus:ring-primary-600 dark:focus:ring-primary-500',
        // 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500',

        //Position
        // {
        //   'order-2':
        //     parent.props.buttonLayout == 'horizontal' ||
        //     parent.props.buttonLayout == 'vertical',
        // },
      ],
    }),
  },

  buttongroup: {
    class: ['flex'],
  },

  incrementbutton: {
    root: ({ parent }) => ({
      class: [
        // Display
        // 'flex flex-auto',
        // // Alignment
        // 'items-center',
        // 'justify-center',
        // 'text-center align-bottom',
        //Position
        // 'relative',
        // {
        //   'order-3':
        //     parent.props.showButtons &&
        //     parent.props.buttonLayout == 'horizontal',
        // },
        // {
        //   'order-1':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },
        //Color
        // 'text-surface-600 dark:text-surface-400',
        // 'bg-surface-0 dark:bg-surface-800',
        // Sizing
        // 'w-[3rem]',
        // {
        //   'px-2.5 py-1.5':
        //     parent.props.showButtons && parent.props.buttonLayout !== 'stacked',
        // },
        // {
        //   'p-0':
        //     parent.props.showButtons && parent.props.buttonLayout == 'stacked',
        // },
        // {
        //   'w-full':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },
        // Shape
        // 'rounded-md',
        // {
        //   'rounded-tl-none rounded-br-none rounded-bl-none':
        //     parent.props.showButtons && parent.props.buttonLayout == 'stacked',
        // },
        // {
        //   'rounded-bl-none rounded-tl-none':
        //     parent.props.showButtons &&
        //     parent.props.buttonLayout == 'horizontal',
        // },
        // {
        //   'rounded-bl-none rounded-br-none':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },
        //States
        // 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 focus:dark:ring-primary-500',
        // 'hover:bg-surface-50 dark:hover:bg-surface-700',
        // //Misc
        // 'cursor-pointer overflow-hidden select-none',
      ],
    }),
    label: {
      class: 'h-0 w-0',
    },
  },
  decrementbutton: {
    root: ({ parent }) => ({
      class: [
        // Display
        // 'flex flex-auto',
        // Alignment
        // 'items-center',
        // 'justify-center',
        // 'text-center align-bottom',
        //Position
        // 'relative',
        // {
        //   'order-1':
        //     parent.props.showButtons &&
        //     parent.props.buttonLayout == 'horizontal',
        // },
        // {
        //   'order-3':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },
        //Color
        // 'text-surface-600 dark:text-surface-400',
        // 'bg-surface-0 dark:bg-surface-800',
        // Sizing
        // 'w-[3rem]',
        // {
        //   'px-2.5 py-1.5':
        //     parent.props.showButtons && parent.props.buttonLayout !== 'stacked',
        // },
        // {
        //   'p-0':
        //     parent.props.showButtons && parent.props.buttonLayout == 'stacked',
        // },
        // {
        //   'w-full':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },
        // Shape
        // 'rounded-md',
        // {
        //   'rounded-tr-none rounded-tl-none rounded-bl-none':
        //     parent.props.showButtons && parent.props.buttonLayout == 'stacked',
        // },
        // {
        //   'rounded-tr-none rounded-br-none ':
        //     parent.props.showButtons &&
        //     parent.props.buttonLayout == 'horizontal',
        // },
        // {
        //   'rounded-tr-none rounded-tl-none ':
        //     parent.props.showButtons && parent.props.buttonLayout == 'vertical',
        // },
        //States
        // 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 focus:dark:ring-primary-500',
        // 'hover:bg-surface-50 dark:hover:bg-surface-700',
        //Misc
        // 'cursor-pointer overflow-hidden select-none',
      ],
    }),
    label: {
      class: 'h-0 w-0',
    },
  },
};
