"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Order_1 = require("abstractions/Order");
const PaymentSummary_1 = require("abstractions/Order/PaymentSummary");
const PaymentSummary_2 = require("./PaymentSummary");
const ProductItemList_1 = __importDefault(require("./ProductItemList"));
const ActionButtonGroup_1 = require("./ActionButtonGroup");
const OrderStatus_1 = __importDefault(require("./OrderStatus"));
const Buttons_1 = require("presets/Buttons");
const StyledPaymentSummary = PaymentSummary_2.PaymentSummary;
exports.StyledPaymentSummary = StyledPaymentSummary;
const StyledOrderStatus = styled.withComponent(OrderStatus_1.default) `
  border-bottom: 1px solid #ccc;
  padding: rem(16);

  @phone-or-smaller() {
    padding: rem(16) rem(8);
  }

  ${props => props.state.isExpanded &&
    styled.css `
      svg {
        transform: rotate(180deg);
      }
    `}
`;
exports.StyledOrderStatus = StyledOrderStatus;
const StyledProductItemList = styled.withComponent(ProductItemList_1.default) `
  padding-bottom: rem(16);
  flex: 0 0 60%;

  ${props => props.state.isExpanded &&
    styled.css `
      flex: 0 0 100%;
    `}

  @media(min-width: 768px) and (max-width: 1023px) {
    flex: 0 0 60%;

    ${props => props.state.isExpanded &&
    styled.css `
        flex: 0 0 100%;
      `}
  }
`;
exports.StyledProductItemList = StyledProductItemList;
const StyledOrder = styled.withComponent(Order_1.Order) `

  ${props => props.isSubscriptionItem && styled.css `
    ${PaymentSummary_1.PaymentSummaryPanelSectionLeft}, ${PaymentSummary_1.PaymentSummaryPanelSectionRight} {
      flex: 0 0 100%;
    }

    ${PaymentSummary_1.PaymentSummaryPanel} {
      flex: 0 0 100%;
    }

    ${PaymentSummary_1.StyledActionButtonGroup} {
      display: none;
    }

    ${PaymentSummary_2.StyledProductOrderSummary} {
      border-top: solid 1px #ccc;
      max-width: 100%;
      padding-top: rem(16);
    }
  `}

  ${Order_1.FooterContainer} {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    padding: rem(24) rem(16) rem(16);

    ${ActionButtonGroup_1.SectionWrapper} {
      flex: 0 0 40%;
      flex-direction: column;
      justify-content: flex-end;

      @phone-or-smaller() {
        padding-top: rem(24);
      }
    }

    @media(max-width: 767px) {
      ${StyledProductItemList}, ${ActionButtonGroup_1.SectionWrapper} {
        flex: 0 0 100%;
      }
    }
  }
  ${Order_1.PaymentSummaryContainer} {
    padding: 16px 16px 0;

    @media (max-width: 767px) {
      padding: 16px 8px 0px;
    }
  }
`;
exports.StyledOrder = StyledOrder;
const StyledPrimaryButton = styled.withComponent(Buttons_1.PrimaryButton) `
  margin-bottom: rem(16);
`;
exports.StyledPrimaryButton = StyledPrimaryButton;
const StyledSecondaryButton = styled.withComponent(Buttons_1.SecondaryButton) `
  margin-bottom: rem(16);
`;
exports.StyledSecondaryButton = StyledSecondaryButton;
//# sourceMappingURL=styled.js.map