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

const css = styled.div;

export const Container = css<any>`
   position: relative;

   .text-selected {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: ${(props) => props.theme.primary || ThemeDefault.primary};
   }

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

   .place-holder {
      opacity: 0.4;
   }

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

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

   .close-btn {
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
      padding: 5px;
      opacity: 0.7;
      transition: 0.2s all;

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

   .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;
   }
`;
