import styled from 'styled-components';
import { GetThemeVar } from '../../support/GetThemeVar';

const css = styled.div;

export default css<any>`
   position: relative;

   .autocomplete-list {
      border-radius: 5px;
      margin-top: 5px;
      position: absolute;
      z-index: 10;
      background: white;
      width: 100%;
      box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.24);

      li {
         padding: 10px;
         display: block;
         font-weight: 500;
         font-size: 12px;

         &:hover,
         &.active {
            cursor: pointer;
            padding: 10px;
            background: ${(props) => GetThemeVar(props.theme, 'primary')};
            color: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};
            color: white;
         }

         &.disabled {
            &:hover {
               background: transparent;
               cursor: default;
               color: initial;
            }
         }
      }
   }
`;
