import React from 'react'

const Wrap = styled.div.attrs({
  className: 'autosuggest-wrap',
}) `
  position: relative;
`
const List = styled.div.attrs({
  className: 'autosuggest-list-wrap',
}) ``
const Content = styled.section.attrs({ className: 'autosuggest-content-box' }) `
  background: $colors-main-background;
  ${styled.materialShadow(2)}

  transition: max-height .5s;
  overflow: scroll;

  position: absolute;
  z-index: 1;
  top: rem(50);

  padding: $spacing;
  width: 100%;
  display: flex;
  flex-direction: column;
`
const GoogleLogoWrap = styled.div.attrs({
  className: 'google-wrap',
}) `
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  text-align: right;
`
const GoogleLogoImage = styled.img.attrs({
  className: 'google-logo',
}) `
  max-width: 144px;
  max-height: 18px;
`
export {
  Wrap,
  List,
  Content,
  GoogleLogoWrap,
  GoogleLogoImage,
}