import { RecipeVariants, recipe } from '@vanilla-extract/recipes';

import { vars } from '../css';

const textareaVars = vars.components.textarea;

export const textarea = recipe({
  base: {
    border: `1px solid ${textareaVars.colors.border}`,
    padding: `${textareaVars.space['padding-y']} ${textareaVars.space['padding-x']}`,
    verticalAlign: 'top',

    fontSize: textareaVars.fontSizes.base,

    outline: 'none',
    backgroundColor: 'transparent',

    cursor: 'auto',

    '::placeholder': {
      color: vars.components.input.colors.placeholder,
    },

    ':disabled': {
      opacity: 0.5,
      cursor: 'not-allowed',
    },
  },

  variants: {
    full: {
      true: { width: '100%' },
    },

    resize: {
      none: { resize: 'none' },
      both: { resize: 'both' },
      horizontal: { resize: 'horizontal' },
      vertical: { resize: 'vertical' },
    },
  },

  defaultVariants: {
    resize: 'none',
  },
});

export type TextareaVariants = NonNullable<RecipeVariants<typeof textarea>>;