import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";

export default function contactsPopover(colorScheme: ColorScheme) {
  let layer = colorScheme.middle;
  const sidePadding = 12;
  return {
    background: background(layer),
    cornerRadius: 6,
    padding: { top: 6 },
    margin: { top: -6 },
    shadow: colorScheme.popoverShadow,
    border: border(layer),
    width: 300,
    height: 400,
    inviteRowHeight: 28,
    inviteRow: {
      padding: {
        left: sidePadding,
        right: sidePadding,
      },
      border: border(layer, { top: true }),
      text: text(layer, "sans", "variant", { size: "sm" }),
      hover: {
        text: text(layer, "sans", "hovered", { size: "sm" }),
      },
    },
  }
}