import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import Popover from '../Popover';
export const StyledChildrenWrap = styled.div ``;
export const StyledDialogHeader = styled.div ``;
export const StyledDialogContent = styled.div(({ theme }) => {
    return css `
    position: relative;
    @media (height >= 31.25rem) {
      overflow-y: auto;
      min-height: 4rem;
    }
    padding: calc(2 * ${theme.base.spacing});

    /* Small amount of block padding accounts for focus ring clipping within overflow auto. */
    ${StyledDialogHeader} + & {
      padding-block-start: calc(0.5 * ${theme.base.spacing});
    }

    &:not(:last-child) {
      padding-block-end: calc(0.5 * ${theme.base.spacing});
    }
  `;
});
StyledDialogContent.defaultProps = defaultThemeProp;
export const StyledDialogFooter = styled.div ``;
export const StyledDialog = styled(Popover)(({ theme }) => {
    return css `
    display: flex;
    flex-direction: column;
    min-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem));
    max-width: min(${theme.base['content-width'].lg}, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);

    @media (height < 31.25rem) {
      overflow-y: auto;
    }

    &[aria-busy='true'] {
      ${StyledDialogContent} {
        overflow: hidden;
      }
    }
  `;
});
StyledDialog.defaultProps = defaultThemeProp;
//# sourceMappingURL=Dialog.styles.js.map