import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';

export const styles = StyleSheet.create({
  component: {
    width: '100%',
    height: '100%',
  },
  smLabel: {
    fontSize: 24,
    minWidth: 0,
    flexShrink: 1,
    fontWeight: 600,
  },
  menuContent: {
    borderRadius: 8,
  },
  option: {
    padding: 16,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  canvas: {
    width: '100%',
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 8,
  },
  frame: {
    borderRadius: 8,
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    borderWidth: 0.5,
  },
  compose: {
    borderRadius: 8,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-end',
    gap: 2,
    padding: 8,
  },
  componseInput: {
    borderWidth: 0,
  },
  conversation: {
    flex: 1,
    width: '100%',
    flexShrink: 1,
  },
  navIcon: {
    color: 'white',
    width: 48,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  avoid: {
    width: '100%',
    flexShrink: 0,
  },
  close: {
    paddingTop: 16,
  },
  closeIcon: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: 'transparent',
  },
  smCarousel: {
    paddingLeft: 8,
    paddingBottom: 8,
    height: 80,
    minWidth: 0,
  },
  carousel: {
    paddingLeft: 16,
    paddingBottom: 8,
    height: 80,
    minWidth: 0,
  },
  status: {
    width: 40,
    height: 32,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    gap: 4,
  },
  assets: {
    display: 'flex',
    flexDirection: 'row',
    gap: 16,
  },
  modal: {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalArea: {
    flexGrow: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
  },
  colorSurface: {
    maxHeight: 400,
    maxWidth: '80%',
    borderRadius: 8,
  },
  sizeSurface: {
    maxHeight: 272,
    maxWidth: '80%',
    borderRadius: 8,
  },
  modalContent: {
    borderRadius: 8,
    paddingTop: 32,
    paddingBottom: 16,
    paddingLeft: 16,
    paddingRight: 16,
    gap: 16,
    minWidth: 256,
    display: 'flex',
    height: '100%',
  },
  colorArea: {
    position: 'relative',
    display: 'flex',
    alignItem: 'center',
    justifyContent: 'center',
    height: 300,
    width: 300,
    padding: 16,
    borderRadius: 8,
  },
  sizeArea: {
    position: 'relative',
    display: 'flex',
    alignItem: 'center',
    justifyContent: 'center',
    width: 256,
    padding: 32,
    borderRadius: 8,
    gap: 8,
  },
  sizeOption: {
    padding: 16,
    borderRadius: 8,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 4,
  },
  sizeOptionPressed: {},
  sizeLargeText: {
    color: 'white',
    fontWeight: '500',
    textAlign: 'center',
    fontSize: 20,
  },
  sizeMediumText: {
    color: 'white',
    fontWeight: '500',
    textAlign: 'center',
    fontSize: 16,
  },
  sizeSmallText: {
    color: 'white',
    fontWeight: '500',
    textAlign: 'center',
    fontSize: 12,
  },
  menu: {
    borderRadius: 8,
  },
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    borderRadius: 8,
  },
  messageList: {
    width: '100%',
    minWidth: 0,
  },
  messages: {
    paddingBottom: 64,
  },
  smMessages: {
    paddingBottom: 64,
  },
  content: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  thread: {
    display: 'flex',
    flexGrow: 1,
    flexShrink: 1,
    minHeight: 0,
    minWidth: 0,
    height: '50%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  more: {
    paddingTop: 16,
    position: 'absolute',
    top: 0,
    opacity: 0.5,
  },
  loading: {
    position: 'absolute',
    opacity: 0.3,
  },
  empty: {
    position: 'absolute',
    fontSize: 20,
    color: Colors.placeholder,
  },
  smAdd: {
    display: 'flex',
    flexDirection: 'column',
    paddingTop: 8,
  },
  add: {
    display: 'flex',
    flexDirection: 'column',
    paddingTop: 8,
    paddingBottom: 64,
  },
  options: {
    margin: 2,
    backgroundColor: 'transparent',
  },
  send: {
    margin: 2,
    backgroundColor: 'transparent',
  },
  icon: {
    flexShrink: 0,
    marginRight: 0,
    marginLeft: 0,
    marginTop: 4,
    marginBottom: 4,
    backgroundColor: 'transparent',
  },
  pad: {
    paddingLeft: 16,
    paddingRight: 16,
  },
  indent: {
    paddingLeft: 8,
    paddingRight: 8,
  },
  nopad: {},
  topBorder: {
    width: '100%',
    height: 2,
  },
  border: {
    width: '100%',
    height: 1,
  },
  progress: {
    height: 1,
    position: 'absolute',
    width: '50%',
    backgroundColor: Colors.primary,
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    minWidth: 0,
  },
  largeHeader: {
    paddingLeft: 16,
    paddingRight: 16,
  },
  title: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-begin',
    flexGrow: 1,
    flexShrink: 1,
    minWidth: 0,
    gap: 8,
  },
  label: {
    fontSize: 24,
    minWidth: 0,
    flexShrink: 1,
  },
  message: {
    width: '100%',
    fontSize: 14,
    padding: 0,
    maxHeight: 256,
  },
  controls: {
    display: 'flex',
    flexDirection: 'row',
    paddingTop: 8,
    paddingBottom: 8,
    gap: 8,
  },
  control: {
    borderRadius: 4,
  },
  surface: {
    borderRadius: 4,
    width: 36,
    height: 36,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    color: Colors.primary,
  },
  end: {
    display: 'flex',
    flexDirection: 'row',
    flexGrow: 1,
    justifyContent: 'flex-end',
  },
  separator: {
    width: 1,
    height: '100%',
  },
  surfaceMaxWidth: {
    width: '100%',
  },
  safeAreaNav: {
    width: '100%',
    height: 72,
    display: 'flex',
    alignItems: 'center',
    paddingBottom: 16,
    paddingRight: 8,
    paddingLeft: 8,
    flexDirection: 'row',
  },
  safeAreaHeader: {
    height: 64,
    display: 'flex',
    alignItems: 'center',
    marginRight: 16,
    marginLeft: 16,
    flexDirection: 'row-reverse',
    borderBottomWidth: 0.5,
    gap: 16,
  },
  assetSpacer: {
    width: '100%',
    height: 8,
  },
  textInput: {
    paddingTop: 10,
    paddingBottom: 10,
    flexGrow: 1,
    flexShrink: 1,
    minWidth: 0,
  },
  keyboardSpacer: {
    width: '100%',
  },
});
