import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './sc-icon2.js';

const scCartIconCss = ":host{display:block}.cart{position:fixed;bottom:var(--sc-cart-icon-bottom, 30px);right:var(--sc-cart-icon-right, 30px);left:var(--sc-cart-icon-left, auto);top:var(--sc-cart-icon-top, auto);background:var(--sc-color-primary-500);border-radius:var(--sc-cart-icon-border-radius, var(--sc-input-border-radius-medium));width:var(--sc-cart-icon-width, 60px);height:var(--sc-cart-icon-height, 60px);color:var(--sc-color-white);font-family:var(--sc-cart-font-family, var(--sc-input-font-family));font-weight:var(--sc-font-weight-semibold);transition:opacity var(--sc-transition-medium) ease;box-shadow:var(--sc-shadow-small);cursor:pointer}.cart:hover{opacity:0.8}.cart__container{font-size:24px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;height:100%}.cart__counter{position:absolute;top:-8px;left:auto;bottom:auto;right:-8px;font-size:12px;border-radius:var(--sc-cart-counter-border-radius, 9999px);background:var(--sc-color-gray-900);padding:4px 10px;line-height:18px;z-index:1}";

const ScCartIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** The icon to show. */
    this.icon = 'shopping-bag';
    /** The count to show in the cart icon. */
    this.count = 0;
  }
  render() {
    return (h("div", { class: { cart: true }, part: "base" }, h("div", { class: "cart__container" }, h("div", { class: { cart__counter: true } }, this.count), h("slot", null, h("sc-icon", { name: this.icon }))), h("sc-register-icon-library", null)));
  }
  static get style() { return scCartIconCss; }
}, [1, "sc-cart-icon", {
    "icon": [1],
    "count": [2]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-cart-icon", "sc-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-cart-icon":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScCartIcon);
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScCartIcon as S, defineCustomElement as d };
