import styled, { css } from 'styled-components';
import Icon from '../Icon';
import Flex from '../Flex';
import { StyledSearchInput } from '../SearchInput';
import Text, { StyledText } from '../Text';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize } from '../../styles';
import Button, { StyledButton } from '../Button';
import FormDialog from '../Dialog/FormDialog';
import InfoDialog from '../Dialog/InfoDialog';
export const StyledExpandSearchButton = styled(Button) ``;
StyledExpandSearchButton.defaultProps = defaultThemeProp;
export const StyledSearchForm = styled.div `
  ${StyledSearchInput} {
    flex-grow: 1;
    max-width: min(100%, 40ch);
  }
`;
export const StyledViewSelector = styled.button(({ theme, required }) => {
    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    const { urgent } = theme.base.palette;
    const hitAreaMouse = theme.base['hit-area']['mouse-min'];
    const hitAreaFinger = theme.base['hit-area']['finger-min'];
    return css `
    flex-shrink: initial;
    white-space: initial;
    max-width: 100%;

    ${StyledText} {
      white-space: nowrap;
      font-size: ${fontSizes[theme.components.text.h3['font-size']]};
      font-weight: ${theme.components.text.h3['font-weight']};
      line-height: ${hitAreaMouse};
      word-break: break-word;
      @media (pointer: coarse) {
        line-height: ${hitAreaFinger};
      }
    }

    ${StyledText}::after {
      display: ${required ? 'inline-block' : 'none'};
      content: '\\00a0*';
      vertical-align: top;
      color: ${urgent};
    }
  `;
});
StyledViewSelector.defaultProps = defaultThemeProp;
export const StyledListToolbar = styled.div(({ theme, isSmallOrAbove }) => {
    return css `
      width: 100%;
      margin-block-end: calc(0.5 * ${theme.base.spacing});

      ${isSmallOrAbove &&
        css `
        ${StyledExpandSearchButton} {
          margin-inline-start: calc(0.5 * ${theme.base.spacing});
        }

        ${StyledSearchInput} {
          margin-inline-start: ${theme.base.spacing};

          input {
            min-width: 20ch;
          }
        }
      `}
    `;
});
StyledListToolbar.defaultProps = defaultThemeProp;
export const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {
    return css `
    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));
    max-width: calc(100vw - 4 * ${theme.base.spacing});
  `;
});
StyledListToolbarDialog.defaultProps = defaultThemeProp;
export const StyledListToolbarContent = styled(Flex)(({ theme }) => {
    return css `
    ${StyledButton} + ${StyledButton} {
      margin-inline-start: 0;
    }
    border-radius: calc(0.25 * ${theme.base['border-radius']});
  `;
});
StyledListToolbarContent.defaultProps = defaultThemeProp;
export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
    color: ${theme.base.palette.urgent};
    margin-inline-end: ${theme.base.spacing};
  `);
StyledErrorIcon.defaultProps = defaultThemeProp;
export const StyledHeadingText = styled(Text)(({ theme, required }) => {
    const { urgent } = theme.base.palette;
    const hitAreaMouse = theme.base['hit-area']['mouse-min'];
    const hitAreaFinger = theme.base['hit-area']['finger-min'];
    return css `
    min-width: 0;
    position: relative;
    line-height: ${hitAreaMouse};
    word-break: break-word;
    display: flex;
    align-items: center;
    ${required &&
        css `
      padding-inline-end: calc(1.5 * ${theme.base.spacing});
    `}
    @media (pointer: coarse) {
      line-height: ${hitAreaFinger};
    }
    &::after {
      display: ${required ? 'inline' : 'none'};
      content: '\\00a0*';
      vertical-align: top;
      color: ${urgent};
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;
    }

    ${StyledErrorIcon} {
      margin-inline-end: calc(0.5 * ${theme.base.spacing});
    }
  `;
});
StyledHeadingText.defaultProps = defaultThemeProp;
export const StyledCountMeta = styled(Text)(({ theme }) => {
    const hitAreaMouse = theme.base['hit-area']['mouse-min'];
    const hitAreaFinger = theme.base['hit-area']['finger-min'];
    return css `
    line-height: ${hitAreaMouse};
    white-space: nowrap;
    margin-inline-end: ${theme.base.spacing};

    @media (pointer: coarse) {
      line-height: ${hitAreaFinger};
    }
  `;
});
StyledCountMeta.defaultProps = defaultThemeProp;
export const StyledInfo = styled.div(({ status, theme: { components: { 'form-field': formField } } }) => css `
    ${status &&
    formField[status] &&
    css `
      color: ${formField[status]['status-color']};
    `}
  `);
StyledInfo.defaultProps = defaultThemeProp;
export const StyledSearchContainer = styled(Flex)(({ theme }) => css `
    margin-block: ${theme.base.spacing};

    ${StyledSearchInput} {
      max-width: 100%;
    }
  `);
StyledSearchContainer.defaultProps = defaultThemeProp;
export const StyledInfoDialog = styled(InfoDialog)(({ theme }) => css `
    max-width: ${theme.base['content-width'].sm};
  `);
StyledInfoDialog.defaultProps = defaultThemeProp;
//# sourceMappingURL=ListToolbar.styles.js.map