import { Platform } from "react-native";

import theme from "mazlo-theme";

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

export default StyleSheet.create({
  arrowIcon: {
    marginLeft: 8,
  },
  contentContainer: {
    paddingTop: 11,
    paddingHorizontal: 10,
    paddingBottom: 13,
    width: 300,
  },
  container: {
    position: "relative",
    zIndex: 1,
    paddingRight: 6,
  },
  menuBody: {
    maxHeight: 275,
  },
  menuContainer: {
    backgroundColor: theme.colors.white,
    borderColor: theme.colors.border,
    borderWidth: 1,
    borderRadius: 2,
    flex: 1,
    position: "absolute",
    minWidth: "100%",
    ...Platform.select({
      web: {
        overflow: "auto",
      },
    }),
    top: -1,
  },
  menuContainerRight: {
    right: 0,
  },
  menuContainerTop: {
    bottom: 0,
    top: "auto",
  },
  menuContainerDecorated: {
    marginTop: 8,
    marginBottom: 8,
    ...Platform.select({
      web: {
        boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
      },
    }),
  },
  optionLabel: {
    flex: 1,
  },
  menuOrigin: {
    bottom: 0,
    position: "absolute",
    width: "100%",
  },
  optionText: {
    lineHeight: 26,
    ...Platform.select({
      web: {
        whiteSpace: "nowrap",
      },
    }),
  },
  search: {
    borderRadius: 0,
    borderBottomWidth: 1,
    borderWidth: 0,
  },
  selectedDisplay: {
    alignItems: "center",
    flex: 1,
    flexDirection: "row",
    height: 24,
  },
  selectedOptionContainer: {
    backgroundColor: "#f3f4f6",
  },
  selectedCount: {
    backgroundColor: theme.colors.focus,
    borderRadius: 2,
    color: theme.colors.white,
    fontSize: 13,
    marginRight: 8,
    minWidth: 20,
    padding: 2,
    textAlign: "center",
  },
  toggleContainer: {
    alignItems: "center",
    borderColor: theme.colors.border,
    borderRadius: 2,
    paddingHorizontal: theme.space[2],
    paddingVertical: theme.space[1],
    overflow: "hidden",
  },
  toggleContainerDark: {
    backgroundColor: theme.colors.modes.dark.background,
    ...Platform.select({
      web: {
        borderWidth: 0,
        boxShadow: "inset 0 1px 3px 0 rgba(0, 0, 0, 0.17);",
      },
    }),
  },
  toggleContainerDecorator: {
    backgroundColor: theme.colors.focus,
    position: "absolute",
    bottom: 0,
    height: 4,
    left: 0,
    right: 0,
  },
});