import styled from 'styled-components/macro'

import { сustomScrollbar } from 'features/Common'
import {
  InputWrapper,
  InputStyled,
  Label,
} from 'features/Common/Input/styled'

export const Wrapper = styled.div`
  position: relative;
`

export const Form = styled.form`
  ${InputWrapper} {
    margin: 0;
    padding-bottom: 13px;
  }

  ${InputStyled} {
    width: 100%;

    ::-webkit-search-decoration,
    ::-webkit-search-cancel-button,
    ::-webkit-search-results-button,
    ::-webkit-search-results-decoration {
      display: none; 
    }
  }

  ${Label} {
    ::before {
      content: '';
      display: block;
      width: 25px;
      height: 25px;
      background-image: url(/images/search.svg);
      background-repeat: no-repeat;
    }
  }
  
  :focus-within {
    ${InputWrapper} {
      padding-left: 0;
    }
    
    ${Label} {
      ::before {
        display: none;
      }
    }
  }

`

export const Results = styled.div`
  position: absolute;
  top: 56px;
  width: 448px;
  max-height: 431px;
  overflow-y: auto;

  ${сustomScrollbar}
`