"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

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

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

const Order_1 = require("../../abstractions/Order");

const PaymentSummary_1 = require("../../abstractions/Order/PaymentSummary");

const ProductItem_1 = require("../../abstractions/Order/ProductItem");

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

const PaymentSummary_2 = require("./PaymentSummary");

const ProductItemList_1 = __importDefault(require("./ProductItemList"));

const ActionButtonGroup_1 = require("./ActionButtonGroup");

const OrderStatus_1 = __importDefault(require("./OrderStatus"));

const StyledPaymentSummary = PaymentSummary_2.PaymentSummary;
exports.StyledPaymentSummary = StyledPaymentSummary;
const StyledOrderStatus = styleh_components_1.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 && styleh_components_1.styled.css`
      svg {
        transform: rotate(180deg);
      }
    `}
`;
exports.StyledOrderStatus = StyledOrderStatus;
const StyledProductItemList = styleh_components_1.styled.withComponent(ProductItemList_1.default)`
  padding-bottom: rem(16);
  flex: 0 0 60%;

  ${props => props.isSubscriptionItem && styleh_components_1.styled.css`
      ${ProductItem_1.ProductItemWrapper} {
        flex: 1;
      }
      ${ProductItem_1.ProductDetails} {
        flex: 1;
      }
      ${ActionButtonGroup_1.PrintButton}, ${ActionButtonGroup_1.OrderAgainButton}, ${ActionButtonGroup_1.ReturnButton} {
        width: rem(250);
      }
  `}

  ${props => props.isSubscriptionItem && props.state.isExpanded && styleh_components_1.styled.css`
    ${ActionButtonGroup_1.PrintButton}, ${ActionButtonGroup_1.OrderAgainButton}, ${ActionButtonGroup_1.ReturnButton} {
      width: 100%;
    }
  `}

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

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

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

${props => props.isSubscriptionItem && styleh_components_1.styled.css`
    @media(max-width: 768px) {
      flex: 0 0 100%;
    }
  `}
`;
exports.StyledProductItemList = StyledProductItemList;
const StyledOrder = styleh_components_1.styled.withComponent(Order_1.Order)`

${props => props.isSubscriptionItem && styleh_components_1.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);

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

${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);
    }

    ${props => props.isSubscriptionItem && styleh_components_1.styled.css`
        @media(max-width: 768px) {
          flex: 0 0 100%;
          flex-direction: row;
          justify-content: flex-start;
        }
      `}
  }

  @phone-or-smaller() {
    ${StyledProductItemList}, ${ActionButtonGroup_1.SectionWrapper} {
      flex: 0 0 100%;
    }
  }
}
${Order_1.PaymentSummaryContainer} {
  padding: rem(16) rem(16) 0;

  @phone-or-smaller() {
    padding: rem(16) rem(8) 0;
  }
}
`;
exports.StyledOrder = StyledOrder;
const StyledPrimaryButton = styleh_components_1.styled.withComponent(ActionButtonGroup_1.PrintButton)`
  margin-bottom: rem(16);
`;
exports.StyledPrimaryButton = StyledPrimaryButton;
const StyledSecondaryButton = styleh_components_1.styled.withComponent(Buttons_1.SecondaryButton)`
  margin-bottom: rem(16);
`;
exports.StyledSecondaryButton = StyledSecondaryButton; //# sourceMappingURL=styled.js.map