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

const scCcLogoCss = ":host{display:inline-block}.cc-logo{border-radius:var(--sc-cc-border-radius, 4px);line-height:0;overflow:hidden}";

const ScCcLogo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  renderLogo() {
    if (['visa', 'mastercard', 'amex', 'discover', 'diners', 'jcb', 'unionpay'].includes(this.brand)) {
      return h("sc-icon", { name: this.brand, style: { '--height': '0.63em' } });
    }
    return h("sc-icon", { name: "creditcard", style: { '--height': '0.63em' } });
  }
  render() {
    return (h("div", { class: "cc-logo", part: "base" }, this.renderLogo()));
  }
  static get style() { return scCcLogoCss; }
}, [1, "sc-cc-logo", {
    "brand": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-cc-logo", "sc-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-cc-logo":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScCcLogo);
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScCcLogo as S, defineCustomElement as d };
