1 files changed, 54 insertions, 0 deletions

diff --git a/src/components/ui/textarea/styles.ts b/src/components/ui/textarea/styles.ts
new file mode 100644
index 000000000..f2267e000
--- /dev/null
+++ b/src/components/ui/textarea/styles.ts
@@ -0,0 +1,54 @@
+import { Property } from 'csstype';
+
+import { Theme } from '@meetfranz/theme';
+
+export default (theme: Theme) => ({
+  label: {
+    '& > div': {
+      marginTop: 5,
+    },
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  formModifier: {
+    background: 'none',
+    border: 0,
+    borderLeft: theme.inputBorder,
+    padding: '4px 20px 0',
+    outline: 'none',
+
+    '&:active': {
+      opacity: 0.5,
+    },
+
+    '& svg': {
+      fill: theme.inputModifierColor,
+    },
+  },
+  textarea: {
+    background: 'none',
+    border: 0,
+    fontSize: theme.uiFontSize,
+    outline: 'none',
+    padding: 8,
+    width: '100%',
+    color: theme.inputColor,
+
+    '&::placeholder': {
+      color: theme.inputPlaceholderColor,
+    },
+  },
+  wrapper: {
+    background: theme.inputBackground,
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    boxSizing: 'border-box' as Property.BoxSizing,
+    display: 'flex',
+    order: 1,
+    width: '100%',
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+});