import styled from 'styled-components';
import { GetThemeVar } from '../../../support/GetThemeVar';
import { ThemeDefault } from '../../../types/theme.interface';

export const ImageContainer = styled.div<any>``;

export const Wrapper = styled.div<any>`
   display: flex;
   ${(p) => p.vertical && 'flex-direction: column;'}
   ${(p) => p.horizontal && 'flex-direction: row;'}
   ${(p) => !p.horizontal && !p.vertical && 'flex-wrap: wrap;'}
`;

export const ItemContainer = styled.div`
   display: flex;
   box-sizing: border-box;
   transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1))
      scaleY(var(--scale-y, 1));
   transform-origin: 0 0;
   touch-action: manipulation;
   position: relative;
`;
