import { darken, getContrast, lighten, transparentize } from 'polished';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import BareButton from '../Button/BareButton';
import { StyledLink } from '../Link';
import { StyledMenuItem } from '../Menu';
import { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';
import { StyledSearchInput } from '../SearchInput';
import { StyledCancelButton, StyledFiltersPopover, StyledMenuButton, StyledResultsPopover, StyledSearchButton } from '../SearchInput/SearchInput.styles';
import { StyledText } from '../Text';
import { StyledBackdrop } from '../Backdrop';
import { StyledEmptyState } from '../EmptyState';
import { navWidth } from './AppShell.styles';
import { navContrastColors, pxToRem } from './style-utils';
export const StyledSearch = styled.div(({ theme, collapsed, isMediumOrAbove }) => {
    const navBg = theme.components['app-shell'].nav['background-color'];
    const { hoverBg, foreground, border: borderColor } = navContrastColors(theme);
    const maxCollapsedSize = theme.components.input.height;
    let activeColor = hoverBg;
    let hoverColor = lighten(0.1, hoverBg);
    if (getContrast(navBg, hoverColor) < 1.3) {
        activeColor = darken(0.2, hoverBg);
        hoverColor = hoverBg;
    }
    return css `
      flex-shrink: 0;
      justify-content: center;

      ${StyledMenuListContainer} {
        background: transparent;
      }

      > form {
        padding: ${theme.base.spacing} 0;
      }

      header {
        ${StyledText} {
          color: ${transparentize(0.1, foreground)};
        }
      }

      ${StyledBackdrop} {
        background: transparent;
      }

      ${StyledEmptyState} {
        span,
        svg {
          color: ${foreground};
        }
      }

      ${StyledMenu} {
        background: ${navBg};

        &[data-active-scope='true'] [data-current='true'] {
          background-color: ${activeColor};
        }

        ${StyledLink} {
          color: ${foreground};
        }
      }

      ${StyledMenuItem} {
        color: ${foreground};

        li {
          color: ${foreground};
        }

        &:focus-within {
          background-color: ${activeColor};
        }

        &:hover:not([aria-disabled='true']) {
          background-color: ${hoverColor};
        }
      }

      ${StyledFiltersPopover}, ${StyledResultsPopover} {
        background-color: ${navBg};
        z-index: calc(${theme.base['z-index'].backdrop} + 1);
      }

      ${StyledSearchInput} {
        border: none;
        background: transparent;

        ${StyledSearchButton} {
          transition: borderRadius calc(${theme.base.animation.speed} * 2);
          border: none;
          border-start-start-radius: inherit;
          border-end-start-radius: inherit;
        }

        ${StyledCancelButton} {
          color: ${foreground};
        }

        input {
          &::placeholder {
            color: ${transparentize(0.4, foreground)};
          }

          &:hover {
            border-inline-start: ${pxToRem(1)} solid ${borderColor};
          }
        }

        input,
        ${StyledMenuButton}, ${StyledSearchButton} {
          background: ${hoverBg};
          color: ${foreground};
          border-color: transparent;

          &:focus-within {
            border-color: transparent;
          }

          &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within),
          &:hover {
            border-color: ${borderColor};
          }
        }
      }

      form > ${StyledSearchInput} {
        background: ${hoverBg};
        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);

        ${collapsed &&
        isMediumOrAbove &&
        css `
          overflow: hidden;
          ${StyledSearchButton} {
            border-radius: calc(
              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}
            );
            height: ${maxCollapsedSize};
            width: ${maxCollapsedSize};
            padding: 0;

            > :not(:first-child) {
              display: none;
            }
          }

          input {
            padding: 0;
            max-width: 0;
            overflow: hidden;
          }

          ${StyledCancelButton} {
            display: none;
          }
        `}
      }
    `;
});
StyledSearch.defaultProps = defaultThemeProp;
export const StyledAppShellSearchDecoration = styled.div(({ theme }) => {
    const { hoverBg, foreground } = navContrastColors(theme);
    return css `
    width: ${theme.components.input.height};
    height: ${theme.components.input.height};
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: ${hoverBg};
    color: ${foreground};
    margin: 0 auto;
  `;
});
StyledAppShellSearchDecoration.defaultProps = defaultThemeProp;
export const StyledAppShellSearchButton = styled(BareButton) `
  width: 100%;
  &:focus {
    ${StyledAppShellSearchDecoration} {
      outline: none;
      box-shadow: ${props => props.theme.base.shadow['focus-inset']};
    }
  }
`;
StyledAppShellSearchButton.defaultProps = defaultThemeProp;
export const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {
    return css `
    padding: ${base.spacing};
  `;
});
StyledAppshellSearchContainer.defaultProps = defaultThemeProp;
//# sourceMappingURL=AppShellSearch.styles.js.map