"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WaveformContainer = exports.VideoPreview = exports.TimerText = exports.Timer = exports.TextareaInput = exports.StyledInput = exports.RecordContainer = exports.MessageInputContainer = exports.MessageInput = exports.MediaImage = exports.MediaContainer = exports.InputContainer = exports.HiddenFileInput = exports.FilePreviewContainer = exports.FilePreview = exports.FileIcon = void 0;
var _native = _interopRequireDefault(require("styled-components/native"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** @format */

// Theme variables for reuse
const colors = {
  primary: '#141414',
  secondary: '#f5f7f9',
  border: '#ccc',
  white: '#fff',
  black: '#000'
};
const InputContainer = exports.InputContainer = _native.default.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;
`;
const MediaContainer = exports.MediaContainer = _native.default.View`
  flex-direction: row;
  gap: 8px;
  padding: 0 16px 8px;
`;
const MediaImage = exports.MediaImage = _native.default.Image`
  width: 70px;
  height: 70px;
  border-radius: 8px;
`;
const MessageInputContainer = exports.MessageInputContainer = _native.default.View`
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 8px;
`;
const MessageInput = exports.MessageInput = _native.default.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;
`;
const HiddenFileInput = exports.HiddenFileInput = _native.default.View``;
const Timer = exports.Timer = _native.default.Text`
  justify-content: center;
  align-items: center;
  margin-left: 10px;
`;
const TimerText = exports.TimerText = _native.default.Text`
  font-size: 18px;
  font-weight: bold;
  color: ${colors.black};
`;
const WaveformContainer = exports.WaveformContainer = _native.default.View`
  width: 100%;
  height: 40px;
  background-color: #f1f1f1;
`;
const RecordContainer = exports.RecordContainer = _native.default.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
`;
const FilePreviewContainer = exports.FilePreviewContainer = _native.default.View`
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
`;
const FilePreview = exports.FilePreview = _native.default.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;
`;
const FileIcon = exports.FileIcon = _native.default.Image`
  max-width: 80%;
  max-height: 80%;
`;
const VideoPreview = exports.VideoPreview = _native.default.View`
  width: 100%;
  height: 100%;
`;
const StyledInput = exports.StyledInput = _native.default.TextInput`
  padding: 16px 12px;
  background-color: ${colors.secondary};
  font-size: 16px;
  border-radius: 16px;
`;
const TextareaInput = exports.TextareaInput = _native.default.TextInput`
  padding: 16px 12px;
  background-color: ${colors.secondary};
  font-size: 16px;
  color: ${colors.black};
  border-radius: 16px;
`;
//# sourceMappingURL=StyledInputComponents.js.map