import styled, { css } from 'styled-components';

export const KDSCardWrapper = styled.div<{ isZoomIN: boolean, viewMode: string }>`
  background-color: ${({ theme: { colors } }) => colors.default};
  margin-top: 20px;
  ${({ isZoomIN }) =>
    isZoomIN &&
    css`
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      margin: 0;
      right: 0;
      overflow-x: hidden;
      z-index: 100;
    `}
  ${({ viewMode }) =>
      viewMode === "2" &&
      css`
      margin-top: 8px;
    `}
`;

export const ContentWrapper = styled.div<{ isZoomIn: boolean, viewMode: string }>`
  background: ${({ color }) => color};
  padding: 10px 0;
  height: auto;
  ${({ isZoomIn }) =>
    isZoomIn &&
    css`
      width: 100%;
      height: auto;
    `}
  ${({ viewMode }) =>
      viewMode === "2" &&
      css`
        display: flex;
        flex-direction: row;
        padding: 0;
    `}
`;

export const QueuePosDiv = styled.div`
  font-size: max(32px,2vw);
  font-weight: bold;
  width: 118px;
  padding: 0px 14px;
  height: 100%;
  transition: 0.3s;
  background: transparent;
  @media screen and (max-width: 768px) {
    width: 90px;
  }
`;