var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Colors from '../../../__stylesheet-helpers/design-system/_colors-exports.scss';
import BreakpointQueries from '../../../__stylesheet-helpers/responsive/_breakpoints-queries-exports.scss';
var toLinearGradient = function (color) { return "linear-gradient(" + color + ", " + color + ")"; };
var prependLinearGradient = function (color) { return toLinearGradient(color) + ","; };
var ifColorPrependLinearGradient = function (color) {
    return color ?
        prependLinearGradient(color) :
        '';
};
var ResponsiveBackgroundImage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
    "\n"])), function (props) { return props.large && "\n        background-color: " + Colors['$black'] + ";\n        background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.large + ");\n        background-position: center;\n        background-size: cover;\n    \n        " + (props.medium && "\n            @media only screen and " + BreakpointQueries.MediumBelow + " {\n                background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.medium + ");\n            }\n        ") + "\n            \n        " + (props.small && "\n            @media only screen and " + BreakpointQueries.SmallBelow + " {\n                background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.small + ");\n            }\n        ") + "\n        \n        " + (props.tiny && "\n            @media only screen and " + BreakpointQueries.TinyBelow + " {\n                background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.tiny + ");\n            }\n        ") + "\n    "; });
ResponsiveBackgroundImage.propTypes = {
    // If a large background image is not provided, then no background styles will be applied
    large: PropTypes.string,
    medium: PropTypes.string,
    small: PropTypes.string,
    tiny: PropTypes.string,
};
export default ResponsiveBackgroundImage;
var templateObject_1;
//# sourceMappingURL=ResponsiveBackgroundImage.js.map