"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const view_container_1 = require("view-container");
const Heading_1 = require("atoms/Text/Heading");
const DetailedList_1 = require("molecules/DetailedList");
const Button_1 = require("atoms/Button");
const StyledDetailedList = view_container_1.styled.withComponent(DetailedList_1.DetailedList) `
  display: flex;
  margin: 0;
  justify-content: center;
  flex-direction: column;
  flex: 1;

  ${Heading_1.H3} {
    display: none;
  }

  ${DetailedList_1.DetailedListItemPanel} {
    align-items: center;
    margin: 0;
    margin-bottom: rem(4);
    height: 24px;

    @media(max-width: 1023px) {
      height: 16px;
    }

    @media (max-width: 767px) {
      height: 20px;
    }

    ${DetailedList_1.DetailedListLabel} {
      white-space: nowrap;
    }

    ${DetailedList_1.DetailedListValue} {
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
    }
  }

  @media (max-width: 767px) {
    ${DetailedList_1.DetailedListItemPanel} {
      flex: 0 0 100%;
      flex-direction: row;
    }
  }

  .successShipment {
    ${DetailedList_1.DetailedListValue} {
      color: #009944;
    }
  }
  ${DetailedList_1.DetailedListValue} {
    margin: 0 0 0 5px;
    white-space: nowrap;    
  }
  ${DetailedList_1.DetailedListLabel}, ${DetailedList_1.DetailedListValue} {
    position: relative;
    font-weight: 700;
    text-transform: capitalize;
    color: #2c2c2c;
    font-size: 20px;

    @media (max-width: 1023px) {
      font-size: 14px;
      line-height: 20px;
    }
  }
  ${DetailedList_1.DetailedListItemPanel}:nth-child(2){
    ${DetailedList_1.DetailedListValue}:nth-child(2) {
      text-transform: none;
    }
  }
`;
exports.StyledDetailedList = StyledDetailedList;
const StyledButton = view_container_1.styled.withComponent(Button_1.Button) `
  border: none;
  background: transparent;
  padding: 0;
  align-self: flex-start;

  ${Button_1.ButtonIcon} {
    margin: 0;
  }

  ${Button_1.ButtonLabel} {
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0;
    margin-right: 8px;

    @media (max-width: 1023px) {
      font-size: 14px;
      margin-right: rem(4);
    }

    ${props => props.desktopLabel && view_container_1.styled.css `
        &:before {
          content: '${props.desktopLabel}';          
        }
    `}
    ${props => props.mobileLabel && view_container_1.styled.css `
      @phone-or-smaller() {    
        &:before {  
            content: '${props.mobileLabel}';
          }
        }
    `}
  }
`;
exports.StyledButton = StyledButton;
//# sourceMappingURL=styled.js.map