import styled from 'styled-components';
import { ThemeDefault } from '../../types/theme.interface';

const css = styled.div;

export const Container = css`
   position: relative;

   .input-border {
      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) => props.theme.primary || ThemeDefault.primary};
            color: white;
         }

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

   .text-selected {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   input {
      z-index: 1;
      position: relative;
   }

   .place-holder {
      opacity: 0.4;
   }

   .prefix {
      position: absolute;
      max-width: 100%;
      padding-right: 70px;
   }

   .suffix {
      padding-right: 18px !important;
   }

   .close-btn {
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
      padding: 5px;

      &:hover {
         color: ${(props) => props.theme.primary || ThemeDefault.primary};
      }
   }

   .select-icon {
      position: absolute;
      height: 100%;
      right: 0px;
      top: 0px;
      width: 35px;
      text-align: center;
      display: flex;
      font-size: 17px;
      justify-content: center;
      align-items: center;

      &:hover {
         cursor: pointer;
      }
   }

   .line {
      align-self: stretch;
      background-color: rgb(204, 204, 204);
      margin: 8px 15px;
      width: 1px;
      box-sizing: border-box;
   }
`;
