"use strict";

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

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

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

const Text_1 = require("../../../atoms/Text");

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

const StyledMaterialIcon = styleh_components_1.styled(MaterialIcon_1.MaterialIcon)`display:none;position:absolute;z-index:100;cursor:pointer;`;
const StyledCloseIcon = styleh_components_1.styled(StyledMaterialIcon)`top:10px;left:10px;`;
exports.StyledCloseIcon = StyledCloseIcon;
const StyledExpandIcon = styleh_components_1.styled(StyledMaterialIcon)`top:10px;right:10px;`;
exports.StyledExpandIcon = StyledExpandIcon;
const StyledSwapIcon = styleh_components_1.styled(StyledMaterialIcon)`bottom:10px;right:10px;`;
exports.StyledSwapIcon = StyledSwapIcon;
const Wrapper = styleh_components_1.styled.div`position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;&:hover{${StyledCloseIcon},${StyledExpandIcon},${StyledSwapIcon}{display:block;}}`;
exports.Wrapper = Wrapper;
const ImageWrapper = styleh_components_1.styled.div`display:grid;grid-template-columns:auto auto auto;`;
exports.ImageWrapper = ImageWrapper;
const DetailsWrapper = styleh_components_1.styled.div``;
exports.DetailsWrapper = DetailsWrapper;
const ProductImage = styleh_components_1.styled(Image_1.Image)``;
exports.ProductImage = ProductImage;
const ProductName = styleh_components_1.styled(Text_1.StyledBaseText)`text-overflow:ellipsis;white-space:nowrap;word-wrap:break-word;overflow:hidden;`;
exports.ProductName = ProductName;
const ProductPrice = styleh_components_1.styled(Text_1.StyledBaseText)``;
exports.ProductPrice = ProductPrice; //# sourceMappingURL=styled.js.map