import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { colorToString } from "../../utils/colorToString";
import { useStyle } from "../../../runtimes/react/use-style";
import { cx } from "@emotion/css";
import { useResponsiveStyle } from "../../utils/responsive-style";
const Divider = forwardRef(function Divider2({ id, variant, thickness, color, width, margin }, ref) {
  return (
    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.
    // Wrapping it in another flex container fixes it for some reason, read more here:
    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
    /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        id,
        className: cx(useStyle({ display: "flex", width: "100%" }), width, margin),
        children: /* @__PURE__ */ jsx(
          "div",
          {
            className: useStyle({
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              minHeight: 40,
              width: "100%"
            }),
            children: /* @__PURE__ */ jsx(
              "div",
              {
                className: useStyle(
                  useResponsiveStyle(
                    [variant, thickness, color],
                    ([
                      variant2 = "solid",
                      thickness2 = { value: 1, unit: "px" },
                      color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
                    ]) => {
                      switch (variant2) {
                        case "solid":
                        case "dashed":
                        case "dotted":
                          return {
                            borderBottomWidth: thickness2 == null ? 1 : `${thickness2.value}${thickness2.unit}`,
                            borderBottomStyle: variant2,
                            borderBottomColor: colorToString(color2)
                          };
                        case "blended":
                          return {
                            height: `${thickness2.value}${thickness2.unit}`,
                            background: `linear-gradient(${[
                              "90deg",
                              colorToString({ swatch: color2.swatch, alpha: 0 }),
                              colorToString(color2),
                              colorToString({ swatch: color2.swatch, alpha: 0 })
                            ].join(", ")})`
                          };
                        default:
                          variant2;
                          throw new Error(`Invalid variant ${variant2}.`);
                      }
                    }
                  )
                )
              }
            )
          }
        )
      }
    )
  );
});
var Divider_default = Divider;
export {
  Divider_default as default
};
//# sourceMappingURL=Divider.js.map