import { r as e, h as r, F as s, H as i } from "./index.61732cef.js";
import { c as l } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const n = () => ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-on-translucent)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}", c = class {
  constructor(a) {
    e(this, a), this.borderColor = "default", this.color = "default", this.orientation = "horizontal", this.semantics = "separator", this.spacing = "8";
  }
  componentWillLoad() {
    this.forceColor();
  }
  forceColor() {
    this.borderColor !== "default" && (console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.'), this.color = this.borderColor);
  }
  render() {
    const a = this.orientation === "horizontal" ? {
      paddingTop: `var(--s-space-${this.spacing})`,
      paddingBottom: `var(--s-space-${this.spacing})`
    } : {
      paddingRight: `var(--s-space-${this.spacing})`,
      paddingLeft: `var(--s-space-${this.spacing})`
    }, t = l("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`), o = this.semantics === "separator" ? { "aria-orientation": this.orientation } : {};
    return r(i, { key: "23acb3a29638b92737838e75a54d7616e6c9150e", ...o, class: t, role: this.semantics, style: a }, r("span", { key: "3ebf80f47fb36438403551f560db91ecf7d7e559", class: "separator__line" }), this.label && r(s, { key: "84ac7960ba714ab27559751c11bd7c4b56ac3176" }, r("span", { key: "6f8dc3ad3bde938789e28ad05c67da657262a4d1", class: "separator__label" }, this.label), r("span", { key: "63ddb77ea887a890bb1731d12a939783b592e21a", class: "separator__line" })));
  }
};
c.style = n();
export {
  c as swirl_separator
};
