import { Platform } from "react-native";

import theme from "mazlo-theme";

import StyleSheet from "../../services/StyleSheet";

export default StyleSheet.create({
  iconContainer: {
    alignItems: "center",
    backgroundColor: theme.colors.white,
    borderLeftColor: theme.colors.border,
    borderLeftWidth: 1,
    justifyContent: "center",
    position: "absolute",
    bottom: 4,
    right: 3,
    top: 4,
    width: 30,
  },
  input: {
    flex: 1,
    backgroundColor: "white",
    borderColor: theme.colors.border,
    borderRadius: 2,
    borderWidth: 1,
    padding: theme.space[2],
    ...Platform.select({
      web: {
        outlineColor: theme.colors.focus,
      },
    }),
    ":focus": {
      outlineStyle: "solid",
      outlineWidth: 1,
    },
  },
  darkInput: {
    backgroundColor: theme.colors.modes.dark.background,
    borderColor: theme.colors.modes.dark.panelBackground,
    color: theme.colors.white,
    ...Platform.select({
      web: {
        outlineColor: theme.colors.primary,
      },
    }),
  },
  darkIconContainer: {
    backgroundColor: theme.colors.modes.dark.background,
    borderLeftColor: theme.colors.modes.dark.panelBackground,
  },
  disabled: {
    backgroundColor: theme.colors.muted,
    ":focus": {
      outlineStyle: "none",
      outlineWidth: 0,
    },
  },
  disabledDark: {
    backgroundColor: theme.colors.modes.dark.muted,
    ":focus": {
      outlineStyle: "none",
      outlineWidth: 0,
    },
  },
});