import styled, { css } from 'styled-components';
import { StyledFormControl } from '../FormControl';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import BareButton from '../Button/BareButton';
import FormField, { StyledFormFieldInfo } from '../FormField';
import { StyledMetaListItem } from '../MetaList/MetaList';
import Button from '../Button';
import { calculateFontSize } from '../../styles';
import { StyledFileItem } from './FileItem';
export const StyledDropZone = styled(StyledFormControl)(({ compactMode, theme: { base: { 'hit-area': { 'finger-min': fingerMin, compact } }, components } }) => {
    return css `
      width: 100%;
      height: ${components.input.height};
      border: none;
      cursor: pointer;

      ${compactMode &&
        css `
        height: ${compact};
      `}

      @media (pointer: coarse) {
        height: ${fingerMin};
      }
    `;
});
StyledDropZone.defaultProps = defaultThemeProp;
export const StyledUploadStatus = styled(Flex)(({ dragOver, status, readOnly, theme: { base: { 'border-radius': borderRadius }, components: { 'form-field': formField, 'form-control': { 'border-color': borderColor, ':hover': { 'border-color': hoverBorderColor }, 'border-radius': formBorderRadius } } } }) => {
    return css `
    border: 0.0625rem dashed ${borderColor};
    border-start-start-radius: calc(${borderRadius} * ${formBorderRadius});
    border-end-start-radius: calc(${borderRadius} * ${formBorderRadius});
    ${!readOnly &&
        css `
      ${status &&
            css `
        border-color: ${formField[status]['status-color']};
      `};

      ${dragOver &&
            css `
        border-style: solid;
      `}

      &:hover:not([disabled]):not(:focus, :focus-within) {
        ${!status &&
            css `
          border-color: ${hoverBorderColor};
        `}
      }
    `}
  `;
});
StyledUploadStatus.defaultProps = defaultThemeProp;
export const StyledIconWrapper = styled(Flex)(({ theme: { base: { 'border-radius': borderRadius }, components: { 'form-control': { 'border-color': borderColor, 'border-radius': formBorderRadius } } } }) => {
    return css `
    border: 0.0625rem solid ${borderColor};
    border-start-end-radius: calc(${borderRadius} * ${formBorderRadius});
    border-end-end-radius: calc(${borderRadius} * ${formBorderRadius});
    border-inline-start: none;
    aspect-ratio: 1 / 1;
  `;
});
StyledIconWrapper.defaultProps = defaultThemeProp;
export const StyledFileInput = styled.div(({ theme: { components: { 'form-control': { 'border-color': borderColor } } } }) => {
    return css `
      position: relative;

      input {
        display: none;
      }

      ${StyledDropZone}:focus:not([disabled]) {
        > ${StyledIconWrapper} {
          border: none;
        }
        > ${StyledUploadStatus} {
          border-block: none;
          border-inline-start: none;
          border-inline-end: 0.0625rem dashed ${borderColor};
        }
      }
    `;
});
StyledFileInput.defaultProps = defaultThemeProp;
export const StyledSingleFileWrapper = styled.div(({ compact }) => {
    return css `
      display: contents;

      ${compact &&
        css `
        > ${StyledFileItem} {
          width: 25ch;
        }
      `};
    `;
});
export const StyledAttachedFileCount = styled.span(({ theme: { base: { palette, spacing } } }) => {
    return css `
      padding-inline-start: ${spacing};
      color: ${palette.interactive};
    `;
});
StyledAttachedFileCount.defaultProps = defaultThemeProp;
export const StyledFlex = styled(Flex) `
  height: inherit;
`;
export const StyledBareButton = styled(BareButton)(({ theme: { base: { palette, 'hit-area': { 'finger-min': fingerMin, compact }, 'border-radius': baseRadius }, components: { 'form-control': { 'border-color': borderColor, 'border-radius': radius, ':focus': { 'box-shadow': boxShadow } } } } }) => {
    return css `
    height: ${compact};
    width: 25ch;
    cursor: pointer;
    border-radius: calc(${baseRadius} * ${radius});
    background-color: ${palette['primary-background']};

    @media (pointer: coarse) {
      height: ${fingerMin};
    }

    &:focus {
      box-shadow: ${boxShadow};

      ${StyledIconWrapper} {
        border: none;
      }
      ${StyledUploadStatus} {
        border-block: none;
        border-inline-start: none;
        border-inline-end: 0.0625rem dashed ${borderColor};
      }
    }
  `;
});
StyledBareButton.defaultProps = defaultThemeProp;
export const StyledFormField = styled(FormField)(({ compactMode }) => {
    return css `
    ${compactMode &&
        css `
      width: 25ch;
    `};
  `;
});
export const StyledFileInputControl = styled(Flex)(({ theme: { base: { spacing }, components: { 'form-field': formField } }, status }) => {
    return css `
    ${StyledFormFieldInfo} {
      margin-block-start: calc(0.5 * ${spacing});
      ${StyledMetaListItem}:first-child {
        color: ${status && formField[status]['status-color']};
      }
    }
  `;
});
StyledFileInputControl.defaultProps = defaultThemeProp;
export const StyledDownloadAllButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing } } }) => {
    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);
    return css `
    font-size: ${infoFontSize};
    margin-block-start: calc(0.5 * ${spacing});
    align-self: flex-start;
  `;
});
StyledDownloadAllButton.defaultProps = defaultThemeProp;
//# sourceMappingURL=FileInput.styles.js.map