"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const FlexBoxWrapper = styleh_components_1.styled.div`width:100%;`;
exports.FlexBoxWrapper = FlexBoxWrapper;
const FlexBoxContainer = styleh_components_1.styled.div`width:100%;position:relative;display:flex;${props => props.flexWrap && styleh_components_1.styled.css`flex-wrap:${props.flexWrap};`} ${props => props.direction && styleh_components_1.styled.css`flex-direction:${props.direction};`} ${props => props.justifyContent && props.direction === 'row' && styleh_components_1.styled.css`justify-content:${props.justifyContent};`} ${props => props.alignItems && props.direction === 'row' && styleh_components_1.styled.css`align-items:${props.alignItems};`} ${props => props.direction && props.direction === 'column' && styleh_components_1.styled.css`height:500px;`}`;
exports.FlexBoxContainer = FlexBoxContainer;
const FlexBoxItem = styleh_components_1.styled.div`padding:${props => props.gridGap / 2}px;text-align:center;transition:all 600ms ease;overflow:hidden;flex-grow:${props => props.grow ? props.grow : 0};flex-shrink:${props => props.shrink ? props.shrink : 0};flex-basis:${props => props.itemWidth ? props.itemWidth : 'auto'};${props => props.align && styleh_components_1.styled.css`align-self:${props.align};`} ${props => props.direction && props.direction === 'column' && styleh_components_1.styled.css`display:inline-table;`} background-color:#2b2b2b;`;
exports.FlexBoxItem = FlexBoxItem;
const ItemPlaceholder = styleh_components_1.styled.div`background:var(--color-red);color:white;font-size:10rem;`;
exports.ItemPlaceholder = ItemPlaceholder;