'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-85d13173.js');

const klevuButtonCss = ":host{--background-hover:var(--klevu-button-background-hover, var(--klevu-color-primary-darker));--background-color:var(--klevu-button-background-color, var(--klevu-color-primary));--text-align:var(--klevu-button-text-align);--padding:var(--klevu-button-padding, calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)));--font-size:var(--klevu-button-font-size, var(--klevu-body-s-size));--text-color:var(--klevu-button-text-color, var(--klevu-color-neutral-1));--icon-size:var(--klevu-button-icon-size, 1.5em);--icon-color:var(--klevu-button-icon-color, var(--text-color));--icon-rotation:var(--klevu-button-icon-rotation, 0deg);--border-radius:var(--klevu-button-border-radius, 10000000px);--cursor-hover:var(--klevu-button-cursor-hover, auto)}button{display:inline-block;position:relative;background:var(--background-color);border-radius:var(--klevu-border-radius-m);box-sizing:border-box;transition:transform 100ms;border:0;height:calc(var(--klevu-size-m) * 2);font-size:var(--font-size);font-weight:var(--klevu-body-s-weight);padding:0 calc(var(--padding) * 2);text-align:var(--text-align, center)}button klevu-typography{--klevu-typography-font-size:var(--font-size)}button.sizeSmall{--padding:var(--klevu-button-padding, calc(var(--klevu-size-s) - (var(--klevu-body-s-size) / 2)));height:calc(var(--klevu-size-s) * 2)}button.sizeLarge{--padding:var(--klevu-button-padding, calc(var(--klevu-size-l) - (var(--klevu-body-s-size) / 2)));height:calc(var(--klevu-size-l) * 2)}button.sizeTiny{--padding:var(--klevu-button-padding, var(--klevu-spacing-02));height:calc(var(--klevu-size-xs) * 2);--font-size:var(--klevu-body-xs-size);border-radius:var(--klevu-border-radius-s)}button klevu-typography{--klevu-typography-color:var(--text-color);color:var(--text-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button klevu-icon{--klevu-typography-color:var(--text-color);color:var(--icon-color);transform:rotate(var(--icon-rotation));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:hover{background-color:var(--background-hover);cursor:var(--cursor-hover)}button:focus{outline:0}button:focus:after{content:\"\";position:absolute;top:-3px;left:-3px;width:calc(100% + 2px);height:calc(100% + 2px);border:2px solid var(--background-color);border-radius:calc(var(--klevu-border-radius-m) + 2px)}button:disabled{opacity:var(--klevu-opacity-disabled)}button:active:not(:disabled){transform:translateY(1px)}button.secondary{background:var(--klevu-color-neutral-2)}button.secondary klevu-typography,button.secondary klevu-icon{--klevu-typography-color:var(--klevu-color-neutral-7);color:var(--klevu-color-neutral-8)}button.secondary:hover{background:var(--klevu-color-neutral-3);cursor:var(--cursor-hover)}button.fullwidth{display:block;width:100%}button.icon{padding:0;height:calc(var(--klevu-size-m) * 2);width:calc(var(--klevu-size-m) * 2);border-radius:var(--border-radius);font-size:var(--icon-size);font-weight:normal;line-height:1.8}button.icon.sizeSmall,button.icon.sizeTiny{height:calc(var(--klevu-size-s) * 2);width:calc(var(--klevu-size-s) * 2);line-height:1.5}button.icon.sizeLarge{height:calc(var(--klevu-size-l) * 2);width:calc(var(--klevu-size-l) * 2);line-height:2}button.icon klevu-icon{position:relative;top:-1px}button.icon:focus:after{border-radius:100%}button.tertiary{background:transparent;border:0;color:var(--klevu-color-primary);padding:0;height:calc(var(--klevu-size-s) * 2)}button.tertiary klevu-typography,button.tertiary klevu-icon{--klevu-typography-color:var(--klevu-color-primary);color:var(--klevu-color-primary)}";

const KlevuButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.disabled = undefined;
    this.originElement = undefined;
    this.isSecondary = undefined;
    this.isTertiary = undefined;
    this.fullWidth = undefined;
    this.size = "normal";
    this.icon = undefined;
  }
  render() {
    return (index.h("button", { part: "button-base", disabled: this.disabled, class: {
        secondary: Boolean(this.isSecondary),
        tertiary: Boolean(this.isTertiary),
        fullwidth: Boolean(this.fullWidth),
        icon: Boolean(this.icon),
        sizeSmall: this.size === "small",
        sizeLarge: this.size === "large",
        sizeTiny: this.size === "tiny",
      } }, this.icon ? (index.h("klevu-icon", { originElement: this.originElement, name: this.icon })) : (index.h("klevu-typography", { variant: this.isTertiary || this.size === "tiny" ? "body-s" : "body-s-bold" }, index.h("slot", null)))));
  }
};
KlevuButton.style = klevuButtonCss;

exports.klevu_button = KlevuButton;

//# sourceMappingURL=klevu-button.cjs.entry.js.map