import styled, { css } from 'styled-components';
import { StyledButton } from '../Button';
import { defaultThemeProp } from '../../theme';
import { StyledIcon } from '../Icon';
import { StyledCard } from '../Card';
import { StyledBackdrop } from '../Backdrop';
import { StyledResponsiveActionsContainer } from '../ResponsiveActions';
import { StyledProgressBackdrop } from '../Progress';
export const StyledModalChildrenWrap = styled.div ``;
export const StyledModalHeader = styled.header(({ theme: { base }, hasAction }) => {
    const padAdjust = hasAction ? 0.75 : 0;
    return css `
      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})
        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});

      h2 {
        margin-block-start: calc(0.5 * ${base.spacing});
      }

      h2 > ${StyledIcon} {
        margin-inline-end: ${base.spacing};
      }

      ${StyledButton} {
        color: ${base.palette['foreground-color']};
      }
    `;
});
StyledModalHeader.defaultProps = defaultThemeProp;
export const StyledModalContent = styled.div(({ theme: { base } }) => {
    return css `
    position: relative;
    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});

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

    &:last-child {
      padding-bottom: calc(3 * ${base.spacing});
    }

    & > ${StyledBackdrop} {
      top: var(--scroll-top, 0);
    }
  `;
});
StyledModalContent.defaultProps = defaultThemeProp;
export const StyledModal = styled(StyledCard)(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {
    let defaultMinWidth = '80ch';
    let defaultMaxWidth = '80ch';
    if (alert) {
        defaultMinWidth = '60ch';
        defaultMaxWidth = '60ch';
    }
    else if (autoWidth) {
        defaultMaxWidth = '100%';
    }
    return css `
    position: relative;
    box-shadow: ${base.shadow.high};

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

    @media (forced-colors: active) {
      border: 0.0625rem solid transparent;
    }

    ${StyledResponsiveActionsContainer} {
      padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});
    }

    ${!alert && stretch
        ? css `
          height: calc(100% - 1rem);

          ${autoWidth
            ? css `
                max-width: min(calc(100% - 1rem), ${defaultMaxWidth});
              `
            : css `
                width: calc(100% - 1rem);
              `}

          @media (min-width: ${base.breakpoints.sm}) {
            height: calc(100% - 2rem);

            ${autoWidth
            ? css `
                  max-width: min(calc(100% - 2rem), ${defaultMaxWidth});
                `
            : css `
                  width: calc(100% - 2rem);
                `}
          }

          @media (min-width: ${base.breakpoints.md}) {
            height: calc(100% - 4rem);

            ${autoWidth
            ? css `
                  max-width: min(calc(100% - 4rem), ${defaultMaxWidth});
                `
            : css `
                  width: calc(100% - 4rem);
                `}
          }
        `
        : css `
          min-width: min(calc(100% - 1rem), ${defaultMinWidth});
          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});
          max-height: calc(100% - 1rem);

          &:not(:has(footer)) ${StyledProgressBackdrop} {
            border-end-start-radius: ${base['border-radius']};
            border-end-end-radius: ${base['border-radius']};
          }

          ${!center &&
            css `
            margin-block-start: 0.5rem;
          `}

          @media (min-width: ${base.breakpoints.sm}) {
            min-width: min(calc(100% - 2rem), ${defaultMinWidth});
            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});
            max-height: calc(100% - 2rem);
            ${!center &&
            css `
              margin-block-start: 1rem;
            `}
          }

          @media (min-width: ${base.breakpoints.md}) {
            min-width: min(calc(100% - 4rem), ${defaultMinWidth});
            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});
            max-height: calc(100% - 4rem);
            ${!center &&
            css `
              margin-block-start: 2rem;
            `}
          }
        `}

    ${state === 'docked' &&
        css `
      /*
       * This seems like the most optimal of the suboptimal solutions.
       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
       */
      &&& {
        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        pointer-events: auto;
      }
    `}

    &[aria-busy='true'] {
      ${StyledModalContent} {
        /* TODO: Replace with useScrollToggle hook. */
        overflow: hidden;
        min-height: 8rem;
      }
    }
  `;
});
StyledModal.defaultProps = defaultThemeProp;
//# sourceMappingURL=Modal.styles.js.map