import { makeStyles, tokens } from "@fluentui/react-components";

export const useBlocklistStyles = makeStyles({
  root: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalXL,
  },

  tableWrapper: { overflowX: "auto" },
  actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
  mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
  centred: {
    display: "flex",
    justifyContent: "center",
    padding: tokens.spacingVerticalL,
  },
  scheduleForm: {
    display: "flex",
    flexWrap: "wrap",
    gap: tokens.spacingHorizontalM,
    alignItems: "flex-end",
  },
  scheduleField: { minWidth: "140px" },
  metaRow: {
    display: "flex",
    gap: tokens.spacingHorizontalL,
    flexWrap: "wrap",
    paddingTop: tokens.spacingVerticalS,
  },
  metaItem: { display: "flex", flexDirection: "column", gap: "2px" },
  runResult: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalXS,
    maxHeight: "320px",
    overflowY: "auto",
  },
  pagination: {
    display: "flex",
    justifyContent: "flex-end",
    gap: tokens.spacingHorizontalS,
    alignItems: "center",
    paddingTop: tokens.spacingVerticalS,
  },
  dialogForm: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalM,
    minWidth: "380px",
  },
  previewList: {
    fontFamily: "Consolas, 'Courier New', monospace",
    fontSize: "12px",
    maxHeight: "280px",
    overflowY: "auto",
    backgroundColor: tokens.colorNeutralBackground3,
    padding: tokens.spacingVerticalS,
    borderRadius: tokens.borderRadiusMedium,
  },
  errorRow: { backgroundColor: tokens.colorStatusDangerBackground1 },
});