"use strict";

/** @format */

import styled from 'styled-components/native';

// Theme variables for reuse
const colors = {
  primary: '#141414',
  secondary: '#f5f7f9',
  border: '#ccc',
  white: '#fff',
  black: '#000'
};
export const InputContainer = styled.View`
  flex-direction: column;
  padding: 8px 16px 4px 16px;
  background-color: ${colors.white};
  z-index: 100;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top-width: 1px;
  border-top-color: #e5e7eb;
`;
export const MediaContainer = styled.View`
  flex-direction: row;
  gap: 8px;
  padding: 0 16px 8px;
`;
export const MediaImage = styled.Image`
  width: 70px;
  height: 70px;
  border-radius: 8px;
`;
export const MessageInputContainer = styled.View`
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 8px;
`;
export const MessageInput = styled.TextInput`
  padding: 8px 14px;
  border-radius: 20px;
  border-width: 1px;
  border-color: ${props => props.isFocused ? props.color || '#0052CD' : 'transparent'};
  color: #141414;
  font-size: 16px;
  background-color: #f5f7f9;
  flex: 1;
  /* No explicit line-height: on iOS a line-height larger than the
     font's natural metrics drops the glyph to the bottom of the line
     box (looked like the text "sank"). Equal vertical padding + the
     natural line height centers single-line text in the min-height
     box. text-align-vertical / include-font-padding stay for Android. */
  text-align-vertical: center;
  include-font-padding: false;
`;
export const HiddenFileInput = styled.View``;
export const Timer = styled.Text`
  justify-content: center;
  align-items: center;
  margin-left: 10px;
`;
export const TimerText = styled.Text`
  font-size: 18px;
  font-weight: bold;
  color: ${colors.black};
`;
export const WaveformContainer = styled.View`
  width: 100%;
  height: 40px;
  background-color: #f1f1f1;
`;
export const RecordContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
`;
export const FilePreviewContainer = styled.View`
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
`;
export const FilePreview = styled.View`
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-width: 1px;
  border-color: ${colors.border};
  border-radius: 8px;
  background-color: #f9f9f9;
  overflow: hidden;
`;
export const FileIcon = styled.Image`
  max-width: 80%;
  max-height: 80%;
`;
export const VideoPreview = styled.View`
  width: 100%;
  height: 100%;
`;
export const StyledInput = styled.TextInput`
  padding: 16px 12px;
  background-color: ${colors.secondary};
  font-size: 16px;
  border-radius: 16px;
`;
export const TextareaInput = styled.TextInput`
  padding: 16px 12px;
  background-color: ${colors.secondary};
  font-size: 16px;
  color: ${colors.black};
  border-radius: 16px;
`;
//# sourceMappingURL=StyledInputComponents.js.map