@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';
export const StyledSearchInput = styled.div`
    display: flex;
    align-items: center;

    height: ${_ref => {
  let {
    $size
  } = _ref;
  return $size === 'medium' ? '42px' : '32px';
}};

    ${_ref2 => {
  let {
    $shouldUseAbsolutePositioning,
    theme
  } = _ref2;
  return $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)`
    ${_ref3 => {
  let {
    $shouldUseAbsolutePositioning
  } = _ref3;
  return $shouldUseAbsolutePositioning && css`
            position: absolute;
            top: 0;
            right: 0;
        `;
}}

    overflow: hidden;
`;
export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
    display: flex;
    cursor: pointer;
`;
export const StyledMotionSearchInputIconWrapper = styled.div`
    width: 18px;
`;
//# sourceMappingURL=SearchInput.styles.js.map