import { palette , theme } from 'styled-tools' ; import styled , { css } from '../styled' ; import { Box } from '../primitives' ; import { PaneProps } from './Pane' ; export const Pane = styled ( Box ) < PaneProps & { styledBorder ? : boolean | 'shadow' | string ; } > `
  background-color: white;
  border-radius: 3px;

  ${ ( props ) => props . styledBorder !== 'shadow' && typeof props . styledBorder !== 'boolean' ? `border: ${ props . styledBorder }` : null };
  ${ ( props ) => props . styledBorder === 'shadow' && css `
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

      & {
        ${ theme ( 'fannypack.Pane.border.shadow' ) };
      }
    ` };
  ${ ( props ) => props . elevation && css `
      box-shadow: 0px
          ${ ( props ) => theme ( `fannypack.Pane.elevations.${ props . elevation }` ) ( props ) / 2 }px
          ${ theme ( `fannypack.Pane.elevations.${ props . elevation }` ) }px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    ` };
  ${ ( props ) => props . styledBorder === true && css `
      border: 1px solid ${ palette ( 'white800' ) };

      & {
        ${ theme ( 'fannypack.Pane.border.default' ) };
      }
    ` };
  ${ ( props ) => props . isFullWidth && css `
      width: 100%;
    ` };

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