"use strict";

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

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

const Link_1 = require("../../../atoms/Link");

const Incrementer_1 = require("../../../../inputs/Incrementer");

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

const Heading_1 = require("../../../atoms/Text/Heading");

const Quantity_1 = require("../../Quantity");

const Ratings_1 = require("../../Ratings");

const ProductPrice_1 = require("../../ProductPieces/ProductPrice");

const ProductPieces_1 = require("../../ProductPieces");

const ProductIdentifier_1 = require("../../ProductPieces/ProductIdentifier");

const Buttons_1 = require("../../Buttons");

const Toggle_1 = require("../../../molecules/Toggle");

const Figure_1 = require("../../../molecules/Figure");

const PrimaryButton = styleh_components_1.styled.withComponent(Button_1.Button).attrs({
  'data-qa': 'qa-addcart'
})`
  background-color: #14a0d5;
  border: none;
  width: rem(180);
  height: rem(44);
  border-radius: 4px;
  margin-right: 16px;
  padding: 0;

  ${props => props.isAddToCartDisabled && styleh_components_1.styled.css`
    opacity: 0.5;
    pointer-events: none;
  `}

  @media (max-width: 767px) {
    width: 100%;
    margin-bottom: 16px;
  }

  ${Button_1.ButtonLabel} {
    color: #ffffff;
    text-transform: none;
  }
  ${Button_1.ButtonIcon} {
    svg {
      fill: #ffffff;
    }
  }
`;
exports.PrimaryButton = PrimaryButton;
const SecondaryButton = styleh_components_1.styled.withComponent(Button_1.Button).attrs({
  'data-qa': 'qa-save'
})`
  background-color: #5F6C88;
  border: none;
  width: rem(180);
  height: rem(44);
  border-radius: 4px;
  padding: 0;

  @media (max-width: 767px) {
    width: 100%;
  }

  ${Button_1.ButtonLabel} {
    color: #ffffff;
    text-transform: none;
  }
  ${Button_1.ButtonIcon} {
    svg g{
      fill: #ffffff;
    }
  }
`;
exports.SecondaryButton = SecondaryButton;
const StyledHeading = styleh_components_1.styled.withComponent(Heading_1.Heading).attrs({
  'data-qa': 'qa-collection-product-name'
})`
  color: #2c2c2c;
  text-transform: capitalize;
  margin: 0;
  margin-bottom: 8px;
  font-size: 20px;
  @phone-or-smaller()
  {
    font-size: 18px;
  }
`;
exports.StyledHeading = StyledHeading;
const StyledProductName = styleh_components_1.styled.withComponent(ProductPieces_1.ProductName).attrs({
  'data-qa': 'qa-product-name'
})`
  font-size: 28px;
  font-weight: 500;
  margin: 8px 0 12px;

  @phone-or-smaller() {
    margin: 4px 0 12px 0;
    font-size: 20px;
  }
`;
exports.StyledProductName = StyledProductName;
const StyledProductPrice = styleh_components_1.styled.withComponent(ProductPieces_1.ProductPrice).attrs({
  'data-qa': 'qa-product-price'
})`
  display: flex;
  flex-direction: column;
  ${ProductPrice_1.RegularPrice} {
    color: #000000;
    order: 0;
    font-size: 16px;
    @phone-or-smaller()
    {
      font-size: 14px;
    }
  }
  ${ProductPrice_1.SalePrice} {
    color: #EA2227;
    font-size: 20px;
    font-weight: 700;
    order: 1;
    @phone-or-smaller()
    {
      font-size: 16px;
    }
  }
`;
exports.StyledProductPrice = StyledProductPrice;
const StyledProductDescription = styleh_components_1.styled.withComponent(ProductPieces_1.ProductDescription)`
  margin: 0;
  color: #5F6C88;
  @phone-or-smaller()
  {
    font-size: 14px;
  }
`;
exports.StyledProductDescription = StyledProductDescription;
const StyledBrandName = styleh_components_1.styled.withComponent(ProductPieces_1.ProductName)`
  color: #5F6C88;
  font-weight: 500;
  margin: 20px 0 8px;
  text-transform: uppercase;
  font-size: 18px;

  @phone-or-smaller() {
    margin: 14px 0 4px 0;
    font-size: 16px;
  }
`;
exports.StyledBrandName = StyledBrandName;
const StyledQuantity = styleh_components_1.styled.withComponent(Quantity_1.Quantity)`
  width: auto;

  ${Quantity_1.StyledTitle} {
    margin: 0;
    margin-bottom: rem(8);
    font-size: 20px;
    @phone-or-smaller()
    {
      font-size: 16px;
    }
  }

  ${Incrementer_1.IncrementerWrapper} {
    padding: 10px;
    border: 1px solid #A6AFC1;
    border-radius: 4px;
    button svg {
      height: rem(23);
    }
  }
`;
exports.StyledQuantity = StyledQuantity;
const InventoryContent = styleh_components_1.styled.span`
  display: flex;
  height: 44px;
  align-self: flex-end;
  align-items: center;
  font-weight: 500;
  text-transform: capitalize;
  margin-left: rem(24);

  ${props => props.color !== '' && styleh_components_1.styled.css`
    color: ${props.color};
  `}

  @tablet-or-smaller() {
    margin-left: rem(18);
  }

  @phone-or-smaller() {
    height: rem(42);
    margin-left: rem(24);
  }
`;
exports.InventoryContent = InventoryContent;
const StyledRatingTitle = styleh_components_1.styled.div`
  font-size: rem(20);
  font-weight: 700;
`;
exports.StyledRatingTitle = StyledRatingTitle;
const StyledWriteReview = styleh_components_1.styled.withComponent(Buttons_1.LinkButton).attrs({
  'data-qa': 'qa-write-review'
})`
  margin: 0;
  padding: 0;
  justify-content: flex-start;

  ${Button_1.ButtonLabel} {
    color: #159FD5;
    margin: 0;
    text-transform: none;
    font-size: 14px;
  }
`;
exports.StyledWriteReview = StyledWriteReview;
const StyledRating = styleh_components_1.styled.withComponent(Ratings_1.Ratings).attrs({
  'data-qa': 'qa-product-rating'
})`
  padding: 10px 0 6px 0;
`;
exports.StyledRating = StyledRating;
const StyledProductIdentifier = styleh_components_1.styled.withComponent(ProductPieces_1.ProductIdentifier)`
  color: #5F6C88;
  font-size: 16px;
  margin-bottom: 4px;
  @phone-or-smaller()
  {
    font-size: 14px;
  }
  ${ProductIdentifier_1.LabelElement} {
    text-transform: uppercase;
  }
  ${ProductIdentifier_1.ValueElement} {
    margin-left: 5px;
  }
`;
exports.StyledProductIdentifier = StyledProductIdentifier;
const StyledCheckBox = styleh_components_1.styled.withComponent(Toggle_1.Toggle).attrs({
  'data-qa': 'qa-add-item'
})`
  width: rem(180);
  height: rem(44);
  cursor: pointer;

  ${Toggle_1.StyledCheckboxIcon} {
    border-radius: rem(4);
    &:hover .checkbox-borderfill {
      fill: ${props => props.bgColor}
    }
    .checkbox-tickfill {
      transform: scale(1.4,1.4) translate(22px,34px);
    }
  }
  ${Toggle_1.StyledLabel} {
    color: #2C2C2C;
    font-size: 20px;
    font-weight: 700;
  }
`;
exports.StyledCheckBox = StyledCheckBox;
const StyledProductImage = styleh_components_1.styled.withComponent(ProductPieces_1.ProductImage).attrs({
  'data-qa': 'qa-product-image'
})`
  ${ProductPieces_1.ProductImageSection} {
    height: rem(240);
    display: flex;
    align-items: center;

    @tablet-or-smaller() {
      height: rem(184);
    }

    @phone-or-smaller() {
      height: rem(234);
    }
  }
`;
exports.StyledProductImage = StyledProductImage;
const StyledProductImageWithCaption = styleh_components_1.styled.withComponent(ProductPieces_1.ProductImageWithCaption).attrs({
  'data-qa': 'qa-product-image'
})`
  background: #fff;

  ${Figure_1.FigureCaption} {
    &:first-letter {
      text-transform: capitalize
    }
  }
`;
exports.StyledProductImageWithCaption = StyledProductImageWithCaption;
const StyledLink = styleh_components_1.styled.withComponent(Link_1.Link).attrs({
  'data-qa': 'qa-view-bundle'
})`
  width: rem(180);
  height: rem(44);
  border-radius: rem(4);
  margin-right: rem(16);
  background-color: #14a0d5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  text-transform: capitalize;
  font-size: rem(16);

  @media (max-width: 767px) {
    width: 100%;
    margin-bottom: 16px;
  }
`;
exports.StyledLink = StyledLink;
const ProductNavigationLink = styleh_components_1.styled.withComponent(Link_1.Link)`
  text-decoration: none;

  img {
    position: relative;
  }
`;
exports.ProductNavigationLink = ProductNavigationLink; //# sourceMappingURL=styled.js.map