import { createStyle } from '@gluestack-style/react';
export const Textarea = createStyle({
'w': '100%',
'borderWidth': 1,
'borderColor': '$backgroundLight300',
'borderRadius': '$sm',
'h': 100,
'_input': {
p: '$3',
_web: {
outlineWidth: 0,
outline: 'none',
},
},
':hover': {
borderColor: '$borderLight400',
},
':focus': {
'borderColor': '$primary700',
':hover': {
borderColor: '$primary700',
},
},
':disabled': {
'opacity': 0.4,
':hover': {
borderColor: '$backgroundLight300',
},
},
'_dark': {
'borderColor': '$borderDark700',
':hover': {
borderColor: '$borderDark600',
},
':focus': {
'borderColor': '$primary400',
':hover': {
borderColor: '$primary400',
},
},
':disabled': {
':hover': {
borderColor: '$borderDark700',
},
},
},
'variants': {
size: {
xl: {
_input: {
fontSize: '$xl',
},
},
lg: {
_input: {
fontSize: '$lg',
},
},
md: {
_input: {
fontSize: '$md',
},
},
sm: {
_input: {
fontSize: '$sm',
},
},
},
variant: {
default: {
'_input': {
_web: {
outlineWidth: '0',
outline: 'none',
},
},
':focus': {
borderColor: '$primary700',
_web: {
boxShadow: 'inset 0 0 0 1px $primary700',
},
},
':invalid': {
'borderColor': '$error700',
'_web': {
boxShadow: 'inset 0 0 0 1px $error700',
},
':hover': {
borderColor: '$error700',
},
':focus': {
':hover': {
borderColor: '$primary700',
_web: {
boxShadow: 'inset 0 0 0 1px $primary700',
},
},
},
':disabled': {
':hover': {
borderColor: '$error700',
_web: {
boxShadow: 'inset 0 0 0 1px $error700',
},
},
},
},
'_dark': {
':focus': {
borderColor: '$primary400',
_web: {
boxShadow: 'inset 0 0 0 1px $primary400',
},
},
':invalid': {
'borderColor': '$error400',
'_web': {
boxShadow: 'inset 0 0 0 1px $error400',
},
':hover': {
borderColor: '$error400',
},
':focus': {
':hover': {
borderColor: '$primary400',
_web: {
boxShadow: 'inset 0 0 0 1px $primary400',
},
},
},
':disabled': {
':hover': {
borderColor: '$error400',
_web: {
boxShadow: 'inset 0 0 0 1px $error400',
},
},
},
},
},
},
},
},
'defaultProps': {
variant: 'default',
size: 'md',
},
});