@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';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledMotionAccordion = styled(motion.div)`
    ${({
  $isOpen,
  $isWrapped,
  $shouldForceBackground,
  $shouldHideBackground,
  theme
}) => ($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});
        `}

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

    margin-bottom: ${({
  $isOpen,
  $isWrapped
}) => $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;

    ${({
  $isOpen,
  $isWrapped,
  $shouldForceBackground,
  $shouldForceBottomLine,
  $shouldShowLines,
  $shouldHideBottomLine,
  theme,
  $bottomBorderColor
}) => {
  if ($shouldForceBottomLine) {
    return css`
                border-bottom-color: ${$bottomBorderColor ?? `rgba(${theme['headline-rgb'] ?? '0 0 0'}, 1)`};
            `;
  }
  if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
  const shouldShowBottomBorder = theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);
  if ($bottomBorderColor && shouldShowBottomBorder) return css`
                border-bottom-color: ${$bottomBorderColor};
            `;
  if (shouldShowBottomBorder) {
    return css`
                border-bottom-color: rgba(${theme['headline-rgb']}, 1);
            `;
  }
  return undefined;
}}
    ${({
  $isParentWrapped
}) => $isParentWrapped && css`
            padding-left: 17px;
        `}
    ${({
  $isWrapped
}) => !$isWrapped ? css`
                  margin-top: 5px;
              ` : css`
                  margin: 0;
              `}
    ${({
  $isWrapped,
  $shouldHideBackground,
  theme,
  $shouldEnableKeyboardHighlighting
}) => !$isWrapped && !$shouldHideBackground && css`
            &:hover {
                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
            }
            ${!$shouldEnableKeyboardHighlighting ? css`
                      &:focus-visible {
                          background-color: rgba(
                              ${theme['100-rgb']},
                              ${theme.cardBackgroundOpacity}
                          );
                      }
                  ` : null}
        `};

    ${({
  $shouldEnableKeyboardHighlighting,
  $shouldShowKeyboardHighlighting,
  $shouldHideBackground
}) => $shouldEnableKeyboardHighlighting && $shouldShowKeyboardHighlighting && !$shouldHideBackground && css`
            &:focus-visible {
                transition: none;
                ${keyboardFocusHighlightingRingCss};
            }
        `};
`;
//# sourceMappingURL=Accordion.styles.js.map