import { StyleSheet } from 'react-native';

export const inputs = StyleSheet.create({
  basic: {
    width: '100%',
    margin: 0,
  },
  primary: {
    color: '#101010',
    backgroundColor: '#f0f0f040',
  },
  secondary: {
    color: '#FFFFFF',
    backgroundColor: '#f0f0f040',
  },
  outline: {
    color: '#101010',
    backgroundColor: '#f0f0f040',
  },
  success: {
    color: '#06402B',
    backgroundColor: '#FFFFFF',
  },
  danger: {
    color: '#FF0000',
    backgroundColor: '#FFFFFF',
  },
  small: {
    height: 4 * 8,
    paddingVertical: 4,
    paddingHorizontal: 4 * 2,
  },
  medium: {
    height: 4 * 12,
    paddingVertical: 4 * 2,
    paddingHorizontal: 4 * 2,
  },
  large: {
    height: 4 * 16,
    paddingVertical: 4 * 3,
    paddingHorizontal: 4 * 3,
  },
});

export const descriptions = StyleSheet.create({
  basic: {
    fontSize: 10,
    marginTop: 4,
  },
  primary: {
    color: '#101010',
  },
  secondary: {
    color: 'white',
  },
  outline: {
    color: '#101010',
  },
  success: {
    color: 'white',
  },
  danger: {
    color: 'white',
  },
});

export const wrappers = StyleSheet.create({
  basic: {
    minWidth: 240,
    width: '100%',
    padding: 4,
    margin: 0,
  },
  innerBorders: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
});