// @flow
import styled from 'styled-components';
import { getPaletteColor } from '../../../../mixins/branding';
import { getCardBorderRadius } from '../../internals/forms.css-rules';
import { Box } from '../../../../primitives/box';

export const SearchResultsWrapper = styled(Box)`
  display: ${({ isVisible }) => (isVisible ? 'block' : 'none')};
  background: ${getPaletteColor('white')};
  max-height: 400px;
  box-shadow: 0px 5px 15px rgba(59, 59, 59, 0.2);
  border-radius: ${getCardBorderRadius};
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 0;
`;
