@chayns-components/core/lib/esm/components/list/list-item/ListItem.styles.js

A set of beautiful React components for developing your own applications with chayns.

import { motion } from 'motion/react';
import styled, { css } from 'styled-components';
export const StyledMotionListItem = styled(motion.div)`
    overflow: hidden;
    transition: background-color 0.3s ease;

    ${_ref => {
  let {
    $isInAccordion,
    $shouldHideIndicator
  } = _ref;
  return $isInAccordion && css`
            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};
        `;
}}

    ${_ref2 => {
  let {
    $isInAccordion,
    $isOpen,
    $shouldForceBackground,
    theme
  } = _ref2;
  return (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
        `;
}}

    ${_ref3 => {
  let {
    $isClickable,
    $isInAccordion,
    theme
  } = _ref3;
  return $isClickable && !$isInAccordion && css`
            &&:hover {
                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
            }
        `;
}}
    
    ${_ref4 => {
  let {
    $isInAccordion,
    $isOpen,
    $isWrapped,
    $shouldHideBottomLine,
    $shouldForceBottomLine,
    $shouldShowSeparatorBelow,
    theme
  } = _ref4;
  if ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) {
    if ($shouldForceBottomLine) {
      return css`
                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                        rgba(${theme['headline-rgb']}, 0.5);
                `;
    }
    return css`
                &&:not(:last-child) {
                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                        rgba(${theme['headline-rgb']}, 0.5);
                }
            `;
  }
  return undefined;
}}

    ${_ref5 => {
  let {
    $isWrapped
  } = _ref5;
  return $isWrapped && css`
            padding-left: 26px;
        `;
}}
`;
export const StyledListItemTooltip = styled.div`
    padding: 6px;
`;
//# sourceMappingURL=ListItem.styles.js.map