import { transparentize } from 'polished';
import styled, { css } from 'styled-components';
import MenuButton from '../MenuButton';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import Button from '../Button';
import BareButton from '../Button/BareButton';
import Input from '../Input';
export const StyledSearchButton = styled(BareButton)(({ theme: { base } }) => {
    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));
    return css `
    padding-inline-start: ${base.spacing};
    color: ${iconColor};

    @media (pointer: coarse) {
      padding-inline-start: calc(3 * ${base.spacing});
    }
  `;
});
StyledSearchButton.defaultProps = defaultThemeProp;
export const StyledMenuButton = styled(MenuButton)(({ theme: { base, components: { 'search-input': searchInput, 'form-control': formControl, input } } }) => {
    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));
    return css `
    border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
    border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
    padding-inline-start: ${base.spacing};
    border: ${input['border-width']} solid ${input['border-color']};
    color: ${iconColor};
    position: relative;
    z-index: 2;
    &:hover {
      text-decoration: none;
    }

    &:focus:enabled {
      border-color: ${formControl[':focus']['border-color']};
      box-shadow: ${formControl[':focus']['box-shadow']};
    }
  `;
});
StyledMenuButton.defaultProps = defaultThemeProp;
export const StyledCancelButton = styled(Button)(({ theme }) => {
    return css `
    position: absolute;
    inset-inline-end: calc(
      (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2
    );
    inset-block-start: calc(
      (${theme.components.input.height} - ${theme.base['hit-area'].compact}) / 2
    );
    z-index: 3;

    @media (pointer: coarse) {
      inset-block-start: calc(
        (${theme.base['hit-area']['finger-min']} - ${theme.base['hit-area'].compact}) / 2
      );
    }
  `;
});
StyledCancelButton.defaultProps = defaultThemeProp;
export const StyledSearchTextInput = styled(Input)(props => {
    const { theme, decoupled } = props;
    const comp = theme.components['search-input'];
    return css `
    flex: 1;
    background: transparent;
    padding-inline-end: calc(${theme.base['hit-area'].finger});
    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    ${decoupled
        ? css `
          border-inline-start: none;
        `
        : css `
          border: none;
        `}
    height: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;

    &[value=''] {
      padding-inline-end: 0;
    }

    &::-ms-clear {
      display: none;
    }

    &::-webkit-search-cancel-button {
      display: none;
    }

    ::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    &:focus:not([disabled]) {
      z-index: 2;
      ${!decoupled &&
        css `
        border: none;
        box-shadow: none;
      `}
    }
  `;
});
StyledSearchTextInput.defaultProps = defaultThemeProp;
export const StyledSearchInput = styled.div(({ theme: { base, components: { input, 'form-control': formControl, 'search-input': searchInput } }, hasFilters }) => {
    return css `
      background: ${formControl['background-color']};
      min-height: ${input.height};
      position: relative;
      height: ${input.height};
      border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});
      ${hasFilters
        ? css `
            border: none;
          `
        : css `
            border: ${input['border-width']} solid ${input['border-color']};
          `}

      ${!hasFilters &&
        css `
        :focus-within {
          border-color: ${base.palette.light};
          box-shadow: ${formControl[':focus']['box-shadow']};
        }
      `}

      @media (pointer: coarse) {
        min-height: ${base['hit-area']['finger-min']};
        min-width: ${base['hit-area']['finger-min']};
      }
    `;
});
StyledSearchInput.defaultProps = defaultThemeProp;
export const StyledSearchMenu = styled.div `
  header {
    border-bottom: none;
  }
`;
export const StyledSearchResultsContainer = styled.div `
  padding-top: ${props => props.theme.base.spacing};
`;
StyledSearchResultsContainer.defaultProps = defaultThemeProp;
export const StyledFiltersPopover = styled.div ``;
export const StyledResultsPopover = styled.div ``;
//# sourceMappingURL=SearchInput.styles.js.map