"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var StyledButton_exports = {};
__export(StyledButton_exports, {
  default: () => StyledButton_default
});
module.exports = __toCommonJS(StyledButton_exports);
var import_styled_components = __toESM(require("styled-components"));
var import_yoga_common = require("@gympass/yoga-common");
const StyledButton = import_styled_components.default.button`
  box-sizing: border-box;
  text-align: center;
  outline: none;
  transition: all 0.2s;
  cursor: pointer;

  ${({
  full,
  small,
  inverted,
  secondary,
  disabled,
  isLoading,
  theme: {
    yoga: {
      baseFont,
      components: { button }
    }
  }
}) => {
  const state = secondary ? "secondary" : "primary";
  return `
      display: flex;
      align-items: center;
      justify-content: center;

      width: ${full ? "100%" : "auto"};
      height: ${small ? button.height.small : button.height.default}px;
      padding-left: ${small ? button.padding.small.left : button.padding.default.left}px;
      padding-right: ${small ? button.padding.small.right : button.padding.default.right}px;

      background-color: ${button.types.contained.backgroundColor[state].default};
      border: none;
      border-radius: ${button.border.radius}px;
      color: ${button.types.contained.font.default.color};

      font-size: ${small ? button.font.size.small : button.font.size.default}px;
      font-weight: ${button.font.weight};
      font-family: ${baseFont.family};
      letter-spacing: normal;
      line-height: ${small ? button.font.lineHeight.small : button.font.lineHeight.default}px;
      text-decoration: none;

      svg {
        width: ${small ? button.icon.size.small : button.icon.size.default}px;
        height: ${small ? button.icon.size.small : button.icon.size.default}px;
        fill: ${button.types.contained.font.default.color};
        margin-right: ${button.icon.margin.right}px;

        transition: fill 0.2s;
      }

      &:not([disabled]):hover, &:not([disabled]):focus {
        box-shadow: 0 4px 8px ${(0, import_yoga_common.hexToRgb)(
    button.types.contained.backgroundColor[state].default,
    0.45
  )};
      }

      &:active {
        background-color: ${button.types.contained.backgroundColor[state].pressed};
        color: ${button.types.contained.font.pressed.color};

        svg {
          fill: ${button.types.contained.font.pressed.color};
        }
      }

      ${disabled ? `

        background-color ${button.types.contained.backgroundColor.disabled};
        color: ${button.types.contained.font.disabled.color};
        pointer-events: none;

        svg {
          fill: ${button.types.contained.font.disabled.color};
        }

        cursor: not-allowed;

      ` : ""}

      ${inverted ? `
        background-color: ${button.types.contained.font.default.color};
        color: ${button.types.contained.backgroundColor[state].default};

        svg {
          fill: ${button.types.contained.backgroundColor[state].default};
        }

        &:active {
          background-color: ${(0, import_yoga_common.hexToRgb)(
    button.types.contained.font.default.color,
    0.75
  )};
          color: ${button.types.contained.backgroundColor[state].pressed};

          svg {
            fill: ${button.types.contained.backgroundColor[state].pressed};
          }
        }

        &:not([disabled]):hover, &:not([disabled]):focus {
          box-shadow: 0 4px 8px ${(0, import_yoga_common.hexToRgb)(
    button.types.contained.font.default.color,
    0.45
  )};
        }
      ` : ""}

      ${isLoading ? `
            position: relative;
            color: transparent;
            ` : ""}

      ${isLoading && inverted || isLoading && disabled ? `
          svg {
            fill: transparent;
          }
            ` : ""}
    `;
}}
`;
var StyledButton_default = StyledButton;
