'use strict';

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

const index = require('./index-d0a4f2de.js');
const theme = require('./theme-43f2cd83.js');

const gascoDividerCss = ".sc-gasco-divider-h{--margin-inline:10px;--margin-block:0;--height-divider:2px;--background:var(--gasco-color-primary, #00A3E0)}.divider-native.sc-gasco-divider{margin-left:var(--margin-block);margin-right:var(--margin-block);margin-top:var(--margin-inline);margin-bottom:var(--margin-inline);height:var(--height-divider);width:100%;max-width:100%;background:var(--gasco-color-base)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.divider-native.sc-gasco-divider{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-block);margin-inline-start:var(--margin-block);-webkit-margin-end:var(--margin-block);margin-inline-end:var(--margin-block)}}.divider-round.sc-gasco-divider-h .divider-native.sc-gasco-divider{border-radius:100px}";

const GascoDivider = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"` and `"danger"`.
     */
    this.color = 'primary';
  }
  render() {
    return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
        [`divider-${this.shape}`]: this.shape !== undefined,
        'gasco-activatable': true,
      }) }, index.h("div", { class: "divider-native" })));
  }
};
GascoDivider.style = gascoDividerCss;

exports.gasco_divider = GascoDivider;
