import styled , { space , theme } from '../styled' ; import _Callout from '../Callout' ; import Overlay from '../Overlay' ; import { LocalCalloutOverlayProps } from './CalloutOverlay' ; export const Callout = styled ( _Callout ) `
  max-width: 500px;

  @media screen and (max-width: calc(500px + ${ space ( 5 ) }em)) {
    width: 100%;

    & {
      ${ theme ( 'fannypack.CalloutOverlay.Callout.mobile' ) };
    }
  }

  & {
    ${ theme ( 'fannypack.CalloutOverlay.Callout.base' ) };
  }
` ; const CalloutOverlay = styled ( Overlay ) < LocalCalloutOverlayProps > `
  ${ theme ( 'fannypack.CalloutOverlay.base' ) };
` ; export default CalloutOverlay ;