const r = (e) => {
  const { color: o } = e;
  return {
    ".codeblock-code": {
      backgroundColor: o("grey.90"),
      color: o("brand.white"),
      fontFamily: "Fira Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace"
    },
    ".codeblock-input": {
      backgroundColor: o("grey.20"),
      color: o("grey.70"),
      border: "none",
      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    },
    ".codeblock": {
      border: "1px",
      borderColor: o("grey.80"),
      borderRadius: "6px",
      display: "flex",
      flexDirection: "row",
      flexGrow: 1,
      alignItems: "center",
      justifyContent: "space-between",
      height: "48px",
      paddingLeft: "16px",
      paddingRight: "4px",
      gap: "12px"
    },
    ".codeblock-copy": {
      "&:hover": {
        backgroundColor: "transparent",
        outlineWidth: "0px"
      }
    },
    ".codeblock-secret": {
      width: "0px;",
      "&:hover": {
        backgroundColor: "transparent"
      }
    },
    ".codeblock-row": {
      gap: "0px"
    }
  };
}, n = {
  getComponents: r
};
export {
  n as TailwindCodeBlock
};
