fui-fancyui/dist/src/components/atoms/Seperator/Seperator.style.js

FancyUI Libary

import { css as i, styled as s } from "styled-components";
import { getBackgroundColor as n } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
const p = s.div`
  height: 1px;
  background-color: ${({ theme: e, $themeType: r, $layer: t }) => n({ theme: e, $themeType: r ?? "secondary", $layer: t ?? 2 })};
  margin: 8px 0;
`, l = s.div`
  display: flex;
  color: ${({ $themeType: e, $layer: r, theme: t }) => n({ $themeType: e ?? "secondary", $layer: r, theme: t })};

  justify-content: ${({ $textAlignment: e }) => e === "left" ? "flex-start" : e === "right" ? "flex-end" : "center"};
  align-items: center;
  margin: 2px 0;

  > span {
    padding: ${({ $textAlignment: e }) => {
  switch (e) {
    case "left":
      return "0 8px 0 20px";
    case "right":
      return "0 20px 0 8px";
    case "center":
      return "0 8px 0 8px";
  }
}};
    flex-shrink: 0;
  }

  /* This aligns the left line  */
  ${({ $textAlignment: e, $themeType: r, $layer: t, theme: o, $noLine: c }) => !c && (e === "right" || e === "center") && i`
      &:before {
        content: ' ';
        width: 100%;
        height: 1px;
        background-color: ${n({ $themeType: r ?? "secondary", $layer: t, theme: o })};
      }
    `}

  /* This aligns the right line  */
  ${({ $textAlignment: e, $themeType: r, $layer: t, theme: o, $noLine: c }) => !c && (e === "left" || e === "center") && i`
      &:after {
        content: ' ';
        width: 100%;
        height: 1px;
        background-color: ${n({ $themeType: r ?? "secondary", $layer: t, theme: o })};
      }
    `}
`;
export {
  p as StyledI,
  l as StyledTextDiv
};