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

FancyUI Libary

import e from "../../../design/designFunctions/arrayToCssValues/arrayToCssValues.js";
import { getBackgroundColor as l } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import n from "../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator.js";
import m from "../../../design/theme/themeStore/themeStore.js";
import { adjustSystemMessageColor as t } from "../../../utils/functions/adjustSystemMessageColor.js";
import { css as c, styled as p } from "styled-components";
const y = p.aside`
  box-sizing: border-box;
  width: 100%;
  border-width: 1px;
  align-items: center;
  transition: all 0.2s;
  padding: ${({ $padding: o }) => e(o, "spacing")};
  margin: ${({ $margin: o }) => e(o, "spacing")};
  position: relative;
  border-radius: ${({ $borderRadius: o }) => e(o, "borderRadius")};
  overflow: hidden;

  ${({ theme: o, $themeType: s = "error", $layer: i = 0 }) => {
  const r = l({ theme: o, $themeType: s, $layer: i }), a = m((d) => d.isDarkTheme);
  return c`
      border-width: 1px;
      border-style: solid;
      background: hsla(from ${r} h s l / ${a ? "15%" : "3%"});
      color: ${t(r)};
      border-left: 4px solid;
      border-color: ${t(r)};
    `;
}}

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: ${({ theme: o }) => n(o.color.primary[0], 0.8)};
    z-index: -1;
  }

  ${({ $externalStyle: o }) => o}
`;
export {
  y as StyledStystemMessage
};