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

const IconWrapper = styled(Sufix) `
  margin-inline-end: ${getSpacing('s16')};
  padding: 0;
  svg {
    fill: ${getColorAlias('contentSubdued')};
  }
`;
const CloseWrapper = styled(Sufix) `
  display: flex;
  justify-content: flex-end;
  margin-inline-end: ${getSpacing('s16')};
  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) `
  min-width: 60px;
  max-width: calc(100% - ${getSpacing('s16')});
  width: auto;
  flex-grow: 1;
  padding-right: 0;
  border: unset;
`;
const InputWrapper = styled.div `
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  gap: ${getSpacing('s04')};
  padding: ${getSpacing('s12', 's00', 's12', 's16')};
`;
const ItemValue = styled.span ``;
const NoResultsText = styled.span `
  display: flex;
  align-items: center;
  padding: ${getSpacing('s12', 's16')};
  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 };
