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, 1.5vw);
  font-weight: bold;
  width: fit-content;
  padding: 0 14px;
  height: 100%;
  transition: 0.3s;
  background: transparent;
`;