import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import { StyledDialogContent } from '../Dialog/Dialog.styles';
import { StyledCount } from '../Badges/Count';
import Icon from '../Icon';
import Flex from '../Flex';
import { StyledSearchInput } from '../SearchInput';
import { StyledText } from '../Text';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize } from '../../styles';
import Button, { StyledButton } from '../Button';
import FormDialog from '../Dialog/FormDialog';
import { ellipsisOverflow } from '../../styles/mixins';
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.h2['font-size']]};
      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});

    ${StyledDialogContent} {
      @media (height >= 31.25rem) {
        min-height: 2rem;
      }
    }
  `;
});
StyledListToolbarDialog.defaultProps = defaultThemeProp;
export const StyledListToolbarContent = styled(Flex)(({ theme }) => {
    return css `
    border-radius: calc(0.25 * ${theme.base['border-radius']});

    ${StyledButton} + ${StyledButton} {
      margin-inline-start: 0;
    }

    ${StyledButton}:focus {
      z-index: 1;
    }
  `;
});
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 StyledHeading = styled.div(({ theme, required, showName }) => {
    const { urgent } = theme.base.palette;
    const hitAreaCompact = theme.base['hit-area'].compact;
    return css `
      min-width: 0;
      position: relative;
      line-height: ${hitAreaCompact};
      word-break: break-word;
      display: flex;
      align-items: center;

      ${required &&
        css `
        padding-inline-end: calc(1.5 * ${theme.base.spacing});
      `}
      &::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});
      }

      ${StyledText} {
        line-height: ${hitAreaCompact};
        ${ellipsisOverflow};
      }

      ${!required &&
        !showName &&
        css `
        > ${StyledText} {
          ${hideVisually}
        }

        &:not(:has(${StyledViewSelector})) {
          margin-inline-end: -${theme.base.spacing};
        }
      `}
    `;
});
StyledHeading.defaultProps = defaultThemeProp;
export const StyledCountMeta = styled(StyledCount)(({ theme }) => {
    return css `
    white-space: nowrap;
    margin-inline-end: ${theme.base.spacing};
    width: fit-content;
  `;
});
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: calc(0.5 * ${theme.base.spacing});

    ${StyledSearchInput} {
      max-width: 100%;
    }
  `);
StyledSearchContainer.defaultProps = defaultThemeProp;
//# sourceMappingURL=ListToolbar.styles.js.map