import { SearchOutlineMd } from '../../icons/SearchOutlineMd';
import { IconButton } from '../IconButton';
import { Loader } from '../Loader';
import { styled } from '../styled';
import { searchFieldClassnames } from './constants';
export const SearchIcon = styled(SearchOutlineMd) `
  /* Задается чтобы клик по startAdornment приводил к клику в инпут */
  pointer-events: none;

  color: ${({ theme }) => theme.palette.grey[600]};
`;
export const StyledIconButton = styled(IconButton, {
    shouldForwardProp: (prop) => !['$isActive'].includes(prop),
}) `
  opacity: ${({ $isActive }) => ($isActive ? 1 : 0)};
`;
export const TextFieldRoot = styled.div `
  width: ${({ $isFullWidth }) => ($isFullWidth ? '100%' : 'auto')};

  /* @see https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling */
  input[type='search']::-webkit-search-decoration,
  input[type='search']::-webkit-search-cancel-button,
  input[type='search']::-webkit-search-results-button,
  input[type='search']::-webkit-search-results-decoration {
    appearance: none;
  }
`;
export const LoaderWrapper = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
`;
export const EndAdornmentWrapper = styled.div `
  /* Задается чтобы клик по endAdornment приводил к клику в инпут */
  pointer-events: none;

  display: flex;
  align-items: center;

  &.${searchFieldClassnames.endAdornmentVisible} {
    pointer-events: unset;
  }
`;
export const StyledLoader = styled(Loader) `
  width: 20px;
  height: 20px;
`;
