import { Platform } from "react-native";

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

export default StyleSheet.create({
  container: {},
  sortArrow: {
    height: 10,
    width: 6,
    margin: 4,
  },
  label: {
    textTransform: "uppercase",
  },
  rowHover: {
    backgroundColor: "rgba(87, 87, 253, 0.1)",
  },
  table: {
    flex: 1,
    minWidth: undefined,
  },
  tableContainer: {
    overflow: "scroll",
    paddingBottom: 12,
  },
  tbody: {
    flex: 1,
    // override default overflow of FlatList
    ...Platform.select({
      web: {
        overflowX: "visible",
        overflowY: "visible",
      },
    }),
  },
  tr: {
    justifyContent: "center",
    flexDirection: "row",
  },
  th: {
    alignItems: "center",
    backgroundColor: theme.colors.grey,
    flexDirection: "row",
    justifyContent: "flex-start",
    overflow: "hidden",
    paddingHorizontal: 8,
    paddingVertical: 10,
  },
  td: {
    alignItems: "center",
    backgroundColor: theme.colors.white,
    padding: 8,
    flexDirection: "row",
    justifyContent: "flex-start",
    borderTopWidth: 1,
    borderColor: theme.colors.border,
  },
  stickyLeftCell: {
    position: "absolute",
    height: "100%",
    right: 4,
    width: 16,
    shadowColor: theme.colors.border,
    shadowRadius: 4,
    shadowOffset: { width: 2, height: 0 },
  },
  stickyRightCell: {
    position: "absolute",
    height: "100%",
    left: 4,
    width: 16,
    shadowColor: theme.colors.border,
    shadowRadius: 4,
    shadowOffset: { width: -2, height: 0 },
  },
});