// src/components/CommandKey.tsx
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
var CommandKey = ({
  keyboardKey,
  size,
  color,
  backgroundColor
}) => {
  return /* @__PURE__ */ jsx(
    StyledCommandKey,
    {
      color,
      size,
      backgroundColor,
      children: keyboardKey
    }
  );
};
var StyledCommandKey = styled.div`
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: ${(props) => props.color || "black"};
  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor};` : ""}
  border-radius: 3.6px;
  min-width: ${(props) => props.size === "sm" ? 20 : 24}px;
  height: ${(props) => props.size === "sm" ? 20 : 24}px;
  font-size: ${(props) => props.size === "sm" ? 12 : 14}px;
  padding: 3px 6px;
`;

export {
  CommandKey
};
