import styled from 'styled-components';
import { getColorAlias, getFontSize } from '../../../utils/index.js';
import { Prefix, Sufix, TextFieldInput } from '../textField/styles.js';

const IconWrapper = styled(Prefix) `
  margin-left: 16px;
  padding: 0;
  svg {
    fill: ${getColorAlias('contentSubdued')};
  }
`;
const CloseWrapper = styled(Sufix) `
  display: flex;
  justify-content: flex-end;
  margin-right: 16px;
  padding: 0;
  align-self: center;
  bottom: 20px;
  right: 0;
  width: 15%;

  svg {
    fill: ${getColorAlias('contentSubdued')};
    &:hover {
      cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
    }
  }
`;
const Input = styled(TextFieldInput) `
  width: calc(100% - 16px);
  padding-right: 0;
  border: unset;
`;
const InputWrapper = styled.div `
  width: 100%;
`;
const ItemValue = styled.span ``;
const NoResultsText = styled.span `
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: ${getColorAlias('contentDefault')};
  font-weight: ${(props) => props.theme.font.weightRegular};
  font-family: ${(props) => props.theme.font.familyPrimary};
  ${getFontSize('size16')};
  background: ${getColorAlias('containerDefault')};
`;

export { CloseWrapper, IconWrapper, Input, InputWrapper, ItemValue, NoResultsText };
