import { getValueAndUnit } from 'polished';
import { variant as styledVariant } from 'styled-system';
import { styled } from 'styled-components';
import { Box } from '../../atoms/box/index.js';
import themeGet from '../../utils/theme-get.js';
const DEFAULT_WIDTH = 540;
const VARIANT_BORDER_WIDTH = 8;
const variantStyle = (color, props) => {
  const newPadding = getValueAndUnit(themeGet('space', 'xxl')(props))[0] - VARIANT_BORDER_WIDTH;
  return {
    borderLeftWidth: VARIANT_BORDER_WIDTH,
    borderLeftStyle: 'solid',
    borderLeftColor: color,
    paddingLeft: newPadding
  };
};
const variants = props => styledVariant({
  prop: 'variant',
  variants: {
    primary: variantStyle('primary100', props),
    danger: variantStyle('error', props),
    success: variantStyle('success', props),
    info: variantStyle('info', props),
    secondary: variantStyle('accent', props),
    light: variantStyle('grey60', props),
    default: {}
  }
});
export const ModalStyled = styled(Box).withConfig({
  displayName: "modal-styled__ModalStyled",
  componentId: "sc-10fy26m-0"
})(["position:relative;& > .close-button{position:absolute;top:", ";right:", ";}& > .modal-label{margin-bottom:0;margin-top:-", ";padding-top:", ";}", ";"], themeGet('space', 'md'), themeGet('space', 'md'), themeGet('space', 'xxl'), themeGet('space', 'sm'), props => variants(props));
ModalStyled.defaultProps = {
  pl: 'xxl',
  pr: 'xl',
  pt: 'x3',
  pb: 'xxl',
  bg: 'white',
  width: [1, DEFAULT_WIDTH]
};
export default ModalStyled;