"use strict";

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

const tslib_1 = require("tslib");

const styleh_components_1 = tslib_1.__importDefault(require("styleh-components"));

const Image_1 = require("../../atoms/Image");

const Blink_1 = tslib_1.__importDefault(require("../../atoms/Blink"));
/**
 * @info
 * browser support for clip-path
 * https://caniuse.com/#feat=css-clip-path
 */

/**
 * @info
 * 250% - clip-path height (y axis)
 * because, clip-path controls masking.
 */


const CarouselWrapper = styleh_components_1.default.section`position:relative;text-align:center;clip-path:polygon(100% 0,100% 250%,0 250%,0 0);width:100%;z-index:1;`;
exports.CarouselWrapper = CarouselWrapper;
const CarouselPanel = styleh_components_1.default.div`height:auto;position:relative;z-index:1;`;
exports.CarouselPanel = CarouselPanel;
const ItemNavigation = styleh_components_1.default.a`width:100%;`;
exports.ItemNavigation = ItemNavigation;
const ItemListPanel = styleh_components_1.default.div`width:100%;height:100%;display:flex;align-items:center;justify-content:left;transition:all 600ms ease;transform:${props => 'translateX(-' + props.translatePercentage + '%)'};`;
exports.ItemListPanel = ItemListPanel;
const ItemPanel = styleh_components_1.default.div`flex:0 0 ${props => props.flexWidth}%;padding:0 ${props => props.gridGap / 2}px;height:100%;display:flex;align-items:center;justify-content:center;transition:all 600ms ease;`;
exports.ItemPanel = ItemPanel;
const StyledImage = styleh_components_1.default.withComponent(Image_1.Image)`display:flex;flex-direction:row;align-items:center;position:relative;height:${props => props.itemHeight + 'px'};border:1px solid #f0f0f0;${Image_1.ImageElement}{position:absolute;top:0;left:0;right:0;bottom:0;max-width:100%;max-height:100%;margin:auto;width:auto;height:auto;}`;
exports.StyledImage = StyledImage;
const StyledBlink = styleh_components_1.default.withComponent(Blink_1.default)`font-family:'Roboto',Arial;font-size:16px;color:black;`;
exports.StyledBlink = StyledBlink; //# sourceMappingURL=styled.js.map