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

FancyUI Libary

import { css as m, styled as p } from "styled-components";
import { getBackgroundColor as d } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import { sizes as u } from "./sizeSettings.js";
import y from "../../../design/designFunctions/simpleColorTransition/simpleTransition.js";
const C = p.i`
  display: flex;
  justify-content: center;
  font-style: normal;
  align-items: center;
  width: ${({ $sizeC: r }) => u[r ?? "xxs"]};
  aspect-ratio: 1/1;
  color: ${({ $isActive: r, $systemMessage: e, $isPassive: t, theme: i, $themeType: o = "secondary", $layer: n = 0 }) => o === "inherit" ? "inherit" : !t && l({ theme: i, $isActive: r, $systemMessage: e, $layer: n, $themeType: o })};
  ${({ $externalStyle: r }) => r};
  will-change: transform;
  ${y}

  &:hover {
    ${({ $hoverLayer: r, $hoverThemeType: e, $isPassive: t, theme: i, $systemMessage: o, $isActive: n, $themeType: s, $layer: a }) => {
  if (t) return "";
  const c = e ?? s, f = r ?? a;
  if (c === "inherit")
    return "color: inherit;";
  const h = l({
    theme: i,
    $isActive: n,
    $systemMessage: o,
    $layer: f ?? 0,
    $themeType: c ?? "secondary"
  });
  return m`
        color: ${h};
      `;
}}
  }

  svg {
    width: 100%;
    height: 100%;
  }
`, l = ({ theme: r, $isActive: e, $systemMessage: t, $themeType: i, $layer: o }) => t ? r.color[t][o ?? 0] : e ? r.color.accent[0] : d({ theme: r, $themeType: i, $layer: o });
export {
  C as StyledSVG
};