import makeStyles from "../styles/makeStyles";

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      spaces = _ref$cleverUI.spaces,
      colors = _ref$cleverUI.colors;
  return {
    triggerButton: {
      background: "none",
      border: "none",
      display: "flex",
      alignItems: "center",
      gap: spaces.sm,
      cursor: "pointer"
    },
    flag: {
      width: "22px",
      height: "22px",
      "& > svg": {
        borderRadius: "50%"
      }
    },
    chevronOpen: {
      transform: "rotate(180deg)"
    },
    list: {
      listStyle: "none",
      padding: 0,
      margin: "".concat(spaces.md, " 0"),
      overflowY: "auto",
      maxHeight: "min(90vh, 300px)",
      "&::-webkit-scrollbar": {
        width: "8px"
      },
      "&::-webkit-scrollbar-track": {
        backgroundColor: "transparent"
      },
      "&::-webkit-scrollbar-thumb": {
        backgroundColor: colors.neutral[400],
        borderRadius: "8px"
      },
      "&::-webkit-scrollbar-thumb:hover": {
        backgroundColor: colors.neutral[500]
      }
    },
    listItem: {
      background: "none",
      border: "none",
      display: "flex",
      alignItems: "center",
      gap: spaces.sm,
      padding: "".concat(spaces.sm, " ").concat(spaces.md),
      width: "100%",
      cursor: "pointer",
      "&:hover": {
        backgroundColor: colors.primary[50],
        color: colors.primary[500]
      }
    }
  };
};

export default makeStyles(styles);