"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const view_container_1 = require("view-container");
const Placeholder_1 = require("atoms/Placeholder");
const ProductImage = view_container_1.styled.div `
  align-self: flex-start;
`;
exports.ProductImage = ProductImage;
const CheckoutProductImage = view_container_1.styled.withComponent(ProductImage) `
  flex: 0 0 158px;
  margin-right: 30px;
  align-self: flex-start;
  svg {
    width: 100%;
  }
  @tablet-or-smaller() {
    flex: 0 0 118px;
  }
  @phone-or-smaller() {
    flex: 0 0 112px;
    margin-right: 16px;
  }
`;
exports.CheckoutProductImage = CheckoutProductImage;
const StyledImagePlaceholder = view_container_1.styled.withComponent(Placeholder_1.ImagePlaceholder) ``;
exports.StyledImagePlaceholder = StyledImagePlaceholder;
const ProductDetails = view_container_1.styled.div `
  display: flex;
  flex-direction: column;
  flex: 1;
`;
exports.ProductDetails = ProductDetails;
const BrandNamePlaceholder = view_container_1.styled.withComponent(Placeholder_1.TextPlaceholder) `
  margin-bottom: 8px;
`;
exports.BrandNamePlaceholder = BrandNamePlaceholder;
const ProductOptions = view_container_1.styled.div `
  display: flex;
  flex-direction: column;
  margin: 8px 0;
`;
exports.ProductOptions = ProductOptions;
const StyledTextPlaceholder = view_container_1.styled.withComponent(Placeholder_1.TextPlaceholder) `
  width: 100px;
  height: 15px;
  margin-bottom: 4px;
  &:last-child {
    margin-bottom: none;
  }
`;
exports.StyledTextPlaceholder = StyledTextPlaceholder;
const ProductPrice = view_container_1.styled.div ``;
exports.ProductPrice = ProductPrice;
const PricePlaceholder = view_container_1.styled.withComponent(Placeholder_1.TextPlaceholder) `
  width: 50px;
  height: 20px;
  margin-right: 16px;
`;
exports.PricePlaceholder = PricePlaceholder;
const QuantityBox = view_container_1.styled.div `
  display: flex;
  flex: 0 0 20%;
  justify-content: flex-end;
  align-items: baseline;

  @phone-or-smaller() {
    flex: 0 0 calc(100% - 128px);
    text-align: left;
    margin-bottom: 8px;
  }
`;
exports.QuantityBox = QuantityBox;
const StyledRectanglePlaceholder = view_container_1.styled.withComponent(Placeholder_1.RectanglePlaceholder) `
  width: 110px;
  height: 44px;
  @media (min-width: 768px) and (max-width: 1023px) {
    width: 80px;
  }
`;
exports.StyledRectanglePlaceholder = StyledRectanglePlaceholder;
const ItemPriceBox = view_container_1.styled.withComponent(ProductPrice) `
  display: flex;
  flex-direction: column;
  flex-basis: 20%;
  align-items: flex-end;
  @phone-or-smaller() {
    flex: 0 0 calc(100% - 128px);
    text-align: left;
    flex-direction: row;
    align-items: flex-start;
  }
`;
exports.ItemPriceBox = ItemPriceBox;
const StyledItemText = view_container_1.styled.withComponent(Placeholder_1.TextPlaceholder) `
  width: 100px;
  height: 15px;
  margin: 0 8px 4px 0;
`;
exports.StyledItemText = StyledItemText;
const TotalPriceBox = view_container_1.styled.div `
  display: flex;
  flex-direction: column;
  flex-basis: 20%;
  align-items: flex-end;
  @phone-or-smaller() {
    display: none;
  }
`;
exports.TotalPriceBox = TotalPriceBox;
const ProductBox = view_container_1.styled.div `
  display: flex;
  flex-direction: row;
  flex: 1;
  @phone-or-smaller() {
    flex-basis: 100%;
    margin-bottom: rem(8);
  }
`;
exports.ProductBox = ProductBox;
const BaseWrapper = view_container_1.styled.section `
  display: flex;
  flex-direction: row;
  padding: rem(20) rem(8) rem(24) rem(8);
  border-bottom: 1px solid #a6afc1;
  @tablet-or-smaller() {
    padding: rem(16) 0;
  }
`;
exports.BaseWrapper = BaseWrapper;
const Wrapper = view_container_1.styled.withComponent(BaseWrapper) `
  @phone-or-smaller() {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
`;
exports.Wrapper = Wrapper;
//# sourceMappingURL=styled.js.map