/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, h, H as Host, a as getElement } from './index-211ca8fb.js';
import { c as createColorClasses } from './theme-c4ea3043.js';

const gascoCardMdCss = ":host{--gasco-safe-area-left:0px;--gasco-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--gasco-font-family, inherit);overflow:hidden}:host(.gasco-color){background:var(--gasco-color-base);color:var(--gasco-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}:host{--background:#fff;--color:var(--gasco-card-color, var(--gasco-item-color, var(--gasco-color-step-550, #737373)));margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:8px;font-size:14px;box-shadow:0px 4px 8px rgba(171, 190, 209, 0.4)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.card-vertical){max-width:480px}.card-native ::slotted(img){width:100%}:host(.card-horizontal),:host(.card-horizontal-reverse){max-width:802px}:host(.card-horizontal) .card-native,:host(.card-horizontal-reverse) .card-native{display:flex}:host(.card-horizontal) .card-native ::slotted(img),:host(.card-horizontal-reverse) .card-native ::slotted(img){object-fit:cover;flex:0 1 calc(480px / 2);width:calc(480px / 2)}:host(.card-horizontal) .card-native ::slotted([class=wrap-horizontal]),:host(.card-horizontal-reverse) .card-native ::slotted([class=wrap-horizontal]){display:flex;flex-wrap:wrap;flex-direction:column}:host(.card-horizontal-reverse) .card-native{flex-direction:row-reverse}@media only screen and (max-width: 768px){:host(.card-horizontal) .card-native ::slotted(img),:host(.card-horizontal-reverse) .card-native ::slotted(img){flex:0 1 calc(480px / 2.3);width:calc(480px / 2.3)}}@media only screen and (max-width: 480px){:host(.card-horizontal) .card-native ::slotted(img),:host(.card-horizontal-reverse) .card-native ::slotted(img){flex:0 1 calc(480px / 4.5);width:calc(480px / 4.5)}}";

const GascoCard = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * If `true`, the user cannot interact with the card.
     */
    this.disabled = false;
    /**
     * card direction, default is "vertical".
     */
    this.direction = 'vertical';
  }
  connectedCallback() {
    if (this.direction === 'horizontal' || this.direction === 'horizontal-reverse') {
      this.presentHorizontal();
    }
  }
  presentHorizontal() {
    const newContainer = document.createElement('div');
    newContainer.classList.add('wrap-horizontal');
    [...this.el.children].filter(child => {
      if (child.tagName !== 'IMG') {
        return newContainer.appendChild(child);
      }
    });
    this.el.appendChild(newContainer);
  }
  render() {
    return (h(Host, { class: createColorClasses(this.color, {
        'card-disabled': this.disabled,
        [`card-${this.direction}`]: true,
      }) }, h("div", { class: "card-native", part: "native" }, h("slot", null))));
  }
  get el() { return getElement(this); }
};
GascoCard.style = gascoCardMdCss;

const gascoCardContentMdCss = "gasco-card-content{display:block;position:relative}.card-content{padding-left:16px;padding-right:16px;padding-top:13px;padding-bottom:13px;font-size:16px;line-height:24px;font-weight:400}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.card-content h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content h3,.card-content h4,.card-content h5,.card-content h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:1.5}gasco-card-header+.card-content{padding-top:0}@media only screen and (max-width: 768px){.card-content{font-size:16px;line-height:24px}}@media only screen and (max-width: 480px){.card-content{font-size:14px;line-height:20px}}";

const GascoCardContent = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, { class: {
        // Used internally for styling
        [`card-content`]: true,
      } }));
  }
};
GascoCardContent.style = gascoCardContentMdCss;

const gascoCardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:flex;justify-content:space-between;align-items:center;position:relative;background:var(--background);color:var(--color)}:host(.gasco-color){background:var(--gasco-color-base);color:var(--gasco-color-contrast)}:host{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(gasco-card-title:not(:first-child)){margin-top:8px}";

const GascoCardHeader = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * If `true`, the card header will be translucent.
     */
    this.translucent = false;
  }
  render() {
    return (h(Host, { class: createColorClasses(this.color, {
        'card-header-translucent': this.translucent,
        'gasco-inherit-color': true,
      }) }, h("slot", null)));
  }
};
GascoCardHeader.style = gascoCardHeaderMdCss;

const gascoCardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.gasco-color){color:var(--gasco-color-base)}:host{--color:#4D4D4D;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:30px;font-weight:600;line-height:38px}@media only screen and (max-width: 768px){:host{font-size:26px;line-height:33px}}@media only screen and (max-width: 480px){:host{font-size:22px;line-height:33px}}";

const GascoCardTitle = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, { role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
        'gasco-inherit-color': true,
      }) }, h("slot", null)));
  }
};
GascoCardTitle.style = gascoCardTitleMdCss;

export { GascoCard as gasco_card, GascoCardContent as gasco_card_content, GascoCardHeader as gasco_card_header, GascoCardTitle as gasco_card_title };
