// @flow
import styled from 'styled-components';
import { getPaletteColor } from '../../../../mixins/branding';

export const SearchResultsWrapper = styled.div.attrs(({ large }) => ({
  large: large ? 'true' : undefined,
}))`
  background: ${getPaletteColor('white')};
  margin-top: -4px;
  max-height: 400px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid ${getPaletteColor('greyscale-medium')};
  border-top-color: ${getPaletteColor('greyscale-light')};
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
`;
