"use strict";

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

const tslib_1 = require("tslib");

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

const exotic_1 = require("exotic");

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

const Button_1 = require("../../atoms/Button");

const MaterialIcon_1 = require("../../atoms/MaterialIcon");

const StyledThumbNail = styleh_components_1.default.div`position:relative;display:flex;transition:0.5s;left:-${props => props.steps}%;`;
exports.StyledThumbNail = StyledThumbNail;
const StyledBanner = styleh_components_1.default.div`width:100%;margin-bottom:1.25rem;position:relative;overflow:hidden;display:flex;align-items:center;`;
exports.StyledBanner = StyledBanner;
const StyledImage = styleh_components_1.default.withComponent(Image_1.default)`display:flex;flex-direction:row;align-items:center;`;
exports.StyledImage = StyledImage;
const SliderWrapper = styleh_components_1.default.section`order:${props => props.order};position:relative;overflow:hidden;`;
exports.SliderWrapper = SliderWrapper;
const Slot = styleh_components_1.default.div`position:relative;padding:0 ${props => props.gridGap / 2}px 0 ${props => props.gridGap / 2}px;order:${props => props.order};flex:0 0 ${props => props.deviceSpecific}%;display:flex;${props => props.type == 'bannerWithThumbnail' && styleh_components_1.default.css`flex:0 0 5rem;position:relative;height:5rem;width:5rem;opacity:${props => props.pick == props.data ? 1.0 : 0.5};border:${props => props.pick == props.data ? 'black' : 'white'} solid 0.125rem;`};`;
exports.Slot = Slot;
const BackwardArrow = styleh_components_1.default.withComponent(Button_1.Button)`order:${props => props.order};cursor:pointer;${props => props.isAbsolute && styleh_components_1.default.css`position:absolute;top:44%;background:rgba(0,0,0,0.1);color:white;left:${props.align === 'left' ? '0' : 'auto'};right:${props.align === 'right' ? '0' : 'auto'};`};${props => props.isDisabled && styleh_components_1.default.css`opacity:0.4;pointer-events:none;cursor:not-allowed;`};`;
exports.BackwardArrow = BackwardArrow;
const ForwardArrow = styleh_components_1.default.withComponent(Button_1.Button)`order:${props => props.order};cursor:pointer;${props => props.isAbsolute && styleh_components_1.default.css`position:absolute;top:44%;background:rgba(0,0,0,0.1);color:white;left:${props.align === 'left' ? '0' : 'auto'};right:${props.align === 'right' ? '0' : 'auto'};`};${props => props.isDisabled && styleh_components_1.default.css`opacity:0.4;pointer-events:none;cursor:not-allowed;`};`;
exports.ForwardArrow = ForwardArrow;
const Stepper = styleh_components_1.default.withComponent(Button_1.Button)`order:${props => props.order};cursor:pointer;${props => props.isAbsolute && styleh_components_1.default.css`position:absolute;top:44%;background:rgba(0,0,0,0.1);color:white;left:${props.align === 'left' ? '0' : 'auto'};right:${props.align === 'right' ? '0' : 'auto'};`};${props => props.isDisabled && props.arrow === 'prev' && styleh_components_1.default.css`pointer-events:none;opacity:0.3;cursor:not-allowed;`} ${props => props.isDisabled && props.arrow === 'next' && styleh_components_1.default.css`pointer-events:none;opacity:0.3;cursor:not-allowed;`}`;
exports.Stepper = Stepper;
const GalleryWrapper = styleh_components_1.default.div`display:flex;width:100%;`;
exports.GalleryWrapper = GalleryWrapper;
const StyledWrapper = styleh_components_1.default.section`width:100%;${Stepper}{background:rgba(0,0,0,0.1);border:none;padding:1.25rem 0.5rem;font-size:1.25rem;}`;
exports.StyledWrapper = StyledWrapper;
const StyledBullets = styleh_components_1.default.div`display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:1rem;`;
exports.StyledBullets = StyledBullets;
const BulletIcon = styleh_components_1.default.div`width:${props => props.bulletSize};height:${props => props.bulletSize};background:${props => props.bulletColor};margin:0 0.5rem;border-radius:3.125rem;opacity:${props => props.pick == props.data ? 1.0 : 0.5};`;
exports.BulletIcon = BulletIcon;
const StyledMaterialIcon = styleh_components_1.default.withComponent(MaterialIcon_1.MaterialIcon)`fill:${props => props.arrowIconColor};width:${props => exotic_1.isNumber(props.arrowIconSize) ? props.arrowIconSize + 'px' : props.arrowIconSize};height:auto;cursor:pointer;`;
exports.StyledMaterialIcon = StyledMaterialIcon; //# sourceMappingURL=styled.js.map