import { styled } from 'styleh-components'
import { H3 } from 'atoms/Text/Heading'
import {
  DetailedList,
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
} from 'molecules/DetailedList'

const ProductOrderSummaryWrapper = styled.withComponent(DetailedList).attrs({
  'data-qa': 'qa-order-summary-container',
})`
  margin: 0;
  max-width: 300px;
  @media (min-width: 768px) and (max-width: 1023px) {
    width: 232px;
  }

  ${H3} {
    margin: 0;
    padding: 0 0 10px 0;
    font-size: 20px;
    color: var(--color-black);
    font-family: "Roboto";
  }

  ${DetailedListItemPanel} {
    text-transform: capitalize;
    line-height: 25px;
    flex-direction: row;
    margin: 0;
    margin-bottom: rem(4);

    ${DetailedListLabel} {
      font-family: "Roboto";
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    ${DetailedListValue} {
      font-family: "Roboto";
      margin: 0;
      flex: 1;
      text-align: right;
      text-transform: uppercase;
    }
  }

  .enable-bold {
    font-weight: 700;
  }
  .enable-semi {
    font-weight: 500;
  }
  .total-count {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 18px;
  }

  @media (max-width: 1023px) {
    ${H3} {
      font-size: 18px;
    }
  }

  @media (max-width: 767px) {
    .total-count {
      margin-top: 18px
    }
  }
`

export { ProductOrderSummaryWrapper }