fui-fancyui/dist/src/components/molecules/BottomBarIcon/BottomBarIcon.style.js

FancyUI Libary

import { css as c, styled as s } from "styled-components";
import { getBackgroundColor as t } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import { disabledStyle as l } from "../../../design/designFunctions/disabledStyle/disableStyle.js";
const h = s.div`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 78px;
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  margin: 0 auto;
  color: ${({
  $isActive: e,
  theme: o,
  $layer: r = 0,
  $activeThemeType: i = "accent",
  $themeType: n = "secondary",
  $activeLayer: a = 0
}) => e ? t({ theme: o, $themeType: i, $layer: r }) : t({ theme: o, $themeType: n, $layer: a })};
  transition: all 0.3s ease-in-out;
  ${({ $disabled: e }) => e && l}
  text-decoration: none;

  /* This is a media query that tests if the primary input mechanism of the device (e.g., mouse or touch screen) is capable of hovering  */
  ${({ $disabled: e, $hoverStyle: o, theme: r }) => o && c`
      @media (hover: hover) {
        &:hover {
          color: ${!e && r.color.accent[0]};
        }
      }
    `}

  ${({ $externalStyle: e }) => e}
`;
export {
  h as ContentWrapper
};