import { styled } from 'styleh-components'
import { H3 } from 'atoms/Text/Heading'
import {
DetailedList,
DetailedListWrapper,
DetailedListValue,
DetailedListLabel,
DetailedListItemPanel,
} from 'molecules/DetailedList'
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'
import { wording } from 'src/words'
const StyledDetailedList = styled.withComponent(DetailedList)`
display: flex;
margin: 0;
justify-content: center;
flex-direction: column;
flex: 1;
${H3} {
display: none;
}
${DetailedListItemPanel} {
align-items: center;
margin: 0;
margin-bottom: rem(4);
height: 24px;
&.status-value {
${DetailedListValue} {
color: var(--color-dark-green);
}
}
@media(max-width: 1023px) {
height: 16px;
}
@media (max-width: 767px) {
height: 20px;
}
${DetailedListLabel} {
white-space: nowrap;
${props =>
props.isSubscriptionItem &&
styled.css`
font-weight: 500;
font-size: 16px;
`}
}
${DetailedListValue} {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
${props =>
props.isSubscriptionItem &&
styled.css`
font-size: 16px;
`}
}
}
@media (max-width: 767px) {
${DetailedListItemPanel} {
flex: 0 0 100%;
flex-direction: row;
}
}
.successShipment {
${DetailedListValue} {
color: #009944;
}
}
${DetailedListValue} {
margin: 0 0 0 5px;
white-space: nowrap;
}
${DetailedListLabel}, ${DetailedListValue} {
position: relative;
font-weight: 700;
text-transform: capitalize;
color: var(--color-black);
font-size: 20px;
@media (max-width: 1023px) {
font-size: 14px;
line-height: 20px;
}
}
${DetailedListItemPanel}:nth-child(2){
${DetailedListValue}:nth-child(2) {
text-transform: none;
}
}
`
const StyledButton = styled.withComponent(Button).attrs({
'data-qa': 'qa-order-history-details',
})`
border: none;
background: transparent;
padding: 0;
align-self: flex-start;
font-size: 16px;
&:before {
content: '${wording.orderExpansionLabelDesktop}';
${props =>
props.isSubscriptionItem &&
styled.css`
content: '${wording.expansionLabelDesktop}';
`}
}
@phone-or-smaller() {
font-size: 16px;
&:before {
content: '${wording.orderExpansionLabelMobile}';
${props =>
props.isSubscriptionItem &&
styled.css`
content: '${wording.expansionLabelMobile}';
`}
}
}
${ButtonIcon} {
margin: 0;
}
${ButtonLabel} {
text-transform: capitalize;
font-size: 18px;
font-weight: 700;
color: var(--color-black);
margin: 0;
margin-right: 8px;
@media (max-width: 1023px) {
font-size: 14px;
margin-right: rem(4);
}
${props =>
props.isSubscriptionItem &&
styled.css`
font-weight: 400;
`}
}
`
export { StyledDetailedList, StyledButton }