import theme from "mazlo-theme";

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

export default StyleSheet.create({
  container: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  itemContainer: {
    alignItems: "center",
    borderColor: theme.colors.white,
    borderWidth: 2,
    borderRadius: 4,
  },
  imageContainer: {
    width: "100%",
    borderRadius: 4,
    borderWidth: 2,
    padding: 2,
    borderColor: theme.colors.white,
  },
  imageContainerSelected: {
    borderColor: theme.colors.focus,
  },
  image: {
    width: "100%",
    height: "100%",
    borderRadius: 4,
  },
  imageSelected: {
    borderRadius: 0,
  },
  checkbox: {
    position: "absolute",
    top: 8,
    left: 8,
    zIndex: 1,
  },
  title: {
    textAlign: "center",
    flex: 1,
    fontSize: theme.fontSizes.xs,
    marginTop: 6,
  },
});