@chayns-components/core/lib/esm/components/search-input/SearchInput.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 StyledSearchInput = styled.div`
    display: flex;
    align-items: center;

    height: ${({
  $size
}) => $size === 'medium' ? '42px' : '32px'};

    ${({
  $shouldUseAbsolutePositioning,
  theme
}) => $shouldUseAbsolutePositioning ? css`
                  justify-content: center;
                  aspect-ratio: 1;
                  border-radius: 3px;
                  position: relative;
                  cursor: pointer;

                  @media (pointer: fine) {
                      &:hover {
                          background-color: ${theme[201]};
                      }
                  }
              ` : css`
                  gap: 8px;
                  justify-content: flex-end;
                  width: 100%;
              `}
`;
export const StyledSearchInputPseudoElement = styled.div`
    position: absolute;
    right: 0;
    left: 0;
`;
export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
    ${({
  $shouldUseAbsolutePositioning
}) => $shouldUseAbsolutePositioning && css`
            position: absolute;
            top: 0;
            right: 0;
        `}

    overflow: ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
`;
export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
    display: flex;
    cursor: pointer;
`;
export const StyledSearchInputIconTrigger = styled.div`
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible {
                transition: none;
                ${keyboardFocusHighlightingRingCss}
                border-radius: 50%;
                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);
                outline-offset: 2px;
            }
        `}
`;
export const StyledMotionSearchInputIconWrapper = styled.div`
    width: 18px;
`;
//# sourceMappingURL=SearchInput.styles.js.map