import styled , { css , space , palette , theme } from '../styled' ; import CardCard from '../Card/CardCard' ; import CardHeader from '../Card/CardHeader' ; import CardContent from '../Card/CardContent' ; import CardTitle from '../Card/CardTitle' ; import CardFooter from '../Card/CardFooter' ; import Button from '../Button' ; import { CalloutProps } from './Callout' ; import { CalloutCloseProps } from './CalloutClose' ; import Icon , { IconProps } from '../Icon/Icon' ; export const getTintAttributes = ( props ) => { const { type , hasTint } = props ; if ( ! hasTint || ! type ) { return ; } return css `
    background-color: ${ type && palette ( `${ type }Tint` ) ( props ) };
    color: ${ type && palette ( `${ type }TintInverted` ) ( props ) };
    fill: ${ type && palette ( `${ type }TintInverted` ) ( props ) };
    ${ theme ( 'fannypack.Callout.tint' ) };
  ` ; } ; export const Callout = styled ( CardCard ) < CalloutProps > `
  position: relative;

  ${ getTintAttributes };

  & {
    ${ theme ( 'fannypack.Callout.base' ) };
  }
` ; export const CalloutClose = styled ( Button ) < CalloutCloseProps > `
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.5em;
  min-height: 1.5em;
  padding: 0;
  text-align: right;

  &:hover {
    background-color: ${ palette ( 'white700' ) };
    & {
      ${ theme ( 'fannypack.Callout.Close.hover' ) };
    }
  }

  ${ theme ( 'fannypack.Callout.Close.base' ) };
` ; export const CalloutHeader = styled ( CardHeader ) `
  display: flex;
  justify-content: flex-start;

  & {
    ${ theme ( 'fannypack.Callout.Header.base' ) };
  }
` ; export const CalloutContent = styled ( CardContent ) `
  & {
    ${ theme ( 'fannypack.Callout.Content.base' ) };
  }
` ; export const CalloutTitle = styled ( CardTitle ) `
  & {
    ${ theme ( 'fannypack.Callout.Title.base' ) };
  }
` ; export const CalloutFooter = styled ( CardFooter ) `
  & {
    ${ theme ( 'fannypack.Callout.Footer.base' ) };
  }
` ; export const CalloutIcon = styled ( Icon ) < IconProps > `
  margin-right: ${ space ( 4 ) }rem;

  & {
    ${ theme ( 'fannypack.Callout.Icon.base' ) };
  }
` ; export default Callout ;