import { palette , theme } from 'styled-tools' ; import { Box } from '../primitives' ; import styled , { css , space } from '../styled' ; import Button from '../Button' ; import Heading from '../Heading' ; import { AlertProps } from './Alert' ; import { AlertCloseProps } from './AlertClose' ; export const AlertTitle = styled ( Heading ) `
  font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };

  &&:not(:last-child) {
    margin-bottom: ${ space ( 2 ) }em;
  }

  & {
    ${ theme ( 'fannypack.Alert.Title.base' ) };
  }
` ; export const AlertClose = styled ( Button ) < AlertCloseProps > `
  width: 24px;
  min-height: 24px;
  padding: 0;
  text-align: right;

  ${ props => props . isAbsolute ? css `
          position: absolute;
          right: ${ space ( 2 ) }rem;
          top: ${ space ( 2 ) }rem;
        ` : css `
          margin: 0 ${ space ( 2 ) }rem;
        ` };

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

  ${ theme ( 'fannypack.Alert.Close.base' ) };
` ; const tintAttributes = css < AlertProps > `
  background-color: ${ props => props . type && palette ( `${ props . type }Tint` ) ( props ) };
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  color: ${ props => props . type && palette ( `${ props . type }TintInverted` ) ( props ) };
  fill: ${ props => props . type && palette ( `${ props . type }TintInverted` ) ( props ) };
  ${ theme ( 'fannypack.Alert.tint' ) };
` ; export const Alert = styled ( Box ) < AlertProps > `
  background-color: white;
  border: 1px solid ${ palette ( 'white800' ) };
  border-left: 4px solid ${ props => props . type && palette ( props . type ) ( props ) };
  border-radius: 4px;
  position: relative;

  & {
    ${ ( props ) => props . hasTint && tintAttributes };
  }

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