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

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

export const ContentWrapper = styled.div<{ isZoomIn: boolean }>`
  background: ${({ color }) => color};
  padding: 10px 0;
  height: auto;
  ${({ isZoomIn }) =>
    isZoomIn &&
    css`
      width: 100%;
      height: auto;
    `}
`;
