@chayns-components/core/lib/esm/components/accordion/Accordion.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 StyledMotionAccordion = styled(motion.div)`
    ${_ref => {
  let {
    $isOpen,
    $isWrapped,
    $shouldForceBackground,
    $shouldHideBackground,
    theme
  } = _ref;
  return ($isOpen || $shouldForceBackground) && !$isWrapped && !$shouldHideBackground && css`
            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
            border-radius: ${theme.cardBorderRadius}px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
        `;
}}

    ${_ref2 => {
  let {
    theme
  } = _ref2;
  return theme.accordionLines && css`
            border-bottom: 1px solid transparent;
        `;
}}

    margin-bottom: ${_ref3 => {
  let {
    $isOpen,
    $isWrapped
  } = _ref3;
  return $isOpen && !$isWrapped ? '30px' : '0px';
}};
    transition:
        background-color 0.3s ease,
        border-bottom-color 0.3s ease,
        border-radius 0.3s ease,
        box-shadow 0.3s ease,
        margin-bottom 0.3s ease;
    will-change: unset !important;

    margin-top: 10px;

    ${_ref4 => {
  let {
    $isOpen,
    $isWrapped,
    $shouldForceBackground,
    $shouldShowLines,
    $shouldHideBottomLine,
    theme
  } = _ref4;
  if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
  if (theme.accordionLines) {
    if ($isWrapped && $shouldShowLines) {
      return css`
                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
                `;
    }
    if (!$isOpen && $shouldShowLines) {
      return css`
                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
                `;
    }
  }
  return undefined;
}}
    ${_ref5 => {
  let {
    $isParentWrapped
  } = _ref5;
  return $isParentWrapped && css`
            padding-left: 17px;
        `;
}}
    ${_ref6 => {
  let {
    $isWrapped
  } = _ref6;
  return !$isWrapped ? css`
                  margin-top: 5px;
              ` : css`
                  margin: 0;
              `;
}}
    ${_ref7 => {
  let {
    $isWrapped,
    $shouldHideBackground,
    theme
  } = _ref7;
  return !$isWrapped && !$shouldHideBackground && css`
            &:hover {
                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
            }
        `;
}};
`;
//# sourceMappingURL=Accordion.styles.js.map