import styled from 'styled-components';

export const OrderDetailsWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: black;
`;

export const QueuePosBlock = styled.div`
  font-size: 32px;
  font-weight: bold;
  width: 118px;
  padding: 0px 14px;
  display: flex;
  align-items: center;
  height: 49px;
  transition: 0.3s;
  background: ${({ color }) => color};
  @media screen and (max-width: 768px) {
    width: 90px;
    font-size: 22px;
  }
`;

export const OrderTimeBlock = styled.div`
  font-size: 23px;
  display: flex;
  flex-direction: column;
  margin: 0 16px 0 16px;
  @media screen and (max-width: 768px) {
    margin: 0 5px;
    font-size: 18px;
  }
`;

export const OrderTypeBlock = styled.div`
  font-size: 23px;
  text-transform: uppercase;
`;

export const OrderIdBlock = styled.div`
  font-size: 16px;
  margin: 5px 10px;
`;