import { defineSlotRecipe } from '@pandacss/dev';

export const inputGroup = defineSlotRecipe({
  className: 'input-group',
  slots: ['root', 'element'],
  base: {
    root: {
      position: 'relative',
      width: 'full',
    },
    element: {
      alignItems: 'center',
      color: 'fg.muted',
      display: 'flex',
      height: 'full',
      justifyContent: 'center',
      position: 'absolute',
      zIndex: '2',
      _icon: {
        color: 'fg.subtle',
      },
    },
  },
  defaultVariants: {
    size: 'md',
  },
  variants: {
    size: {
      xs: {
        element: { minW: '8', _icon: { boxSize: '4' } },
        root: {
          '& > input:not(:first-child)': { ps: '7!' },
          '& > input:not(:last-child)': { pe: '7!' },
        },
      },
      sm: {
        root: {
          '& > input:not(:first-child)': { ps: '8!' },
          '& > input:not(:last-child)': { pe: '8!' },
        },
        element: { minW: '9', _icon: { boxSize: '4.5' } },
      },
      md: {
        root: {
          '& > input:not(:first-child)': { ps: '9!' },
          '& > input:not(:last-child)': { pe: '9!' },
        },
        element: { minW: '10', _icon: { boxSize: '5' } },
      },
      lg: {
        root: {
          '& > input:not(:first-child)': { ps: '10!' },
          '& > input:not(:last-child)': { pe: '10!' },
        },
        element: { minW: '11', _icon: { boxSize: '5' } },
      },
      xl: {
        root: {
          '& > input:not(:first-child)': { ps: '11!' },
          '& > input:not(:last-child)': { pe: '11!' },
        },
        element: { minW: '11', _icon: { boxSize: '5.5' } },
      },
    },
  },
});