"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const tslib_1 = require("tslib");
const react_1 = require("@emotion/react");
const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
const lighten_1 = tslib_1.__importDefault(require("polished/lib/color/lighten"));
exports.Button = styled_1.default.button `
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: ${({ disabled }) => !disabled && "pointer"};
  opacity: ${({ disabled }) => (disabled ? "0.5" : "1")};
  border: none;
  outline: none;
  height: 26px;
  font-size: 12px;
  mix-blend-mode: normal;
  box-shadow: ${({ boxShadow }) => boxShadow ? "0px 4px 4px rgba(0, 0, 0, 0.25)" : ""};
  border-radius: 4px;
  padding: 0 12px;
  transition: 0.2s background;
  ${({ variant = "primary", disabled }) => {
    if (disabled)
        return;
    return variant === "primary"
        ? (0, react_1.css) `
          background: rgb(29, 155, 240);
          color: #fff;
          &:hover {
            background: ${(0, lighten_1.default)(0.1, "rgb(29, 155, 240)")}};
          }
        `
        : (0, react_1.css) `
          background: #000;
          color: #fff;
          &:hover {
            background: ${(0, lighten_1.default)(0.1, "#000")};
          }
        `;
}}
  & > span {
    font-size: 14px;
  }
`;
//# sourceMappingURL=Button.js.map