import { makeStyles } from '@cleartrip/ct-design-style-manager';

import { PARALLAX_IMAGE_SCALE } from '../constants';

const MOVER_WIDTH_PERCENT = `${PARALLAX_IMAGE_SCALE * 100}%`;
const MOVER_MARGIN_LEFT_PERCENT = `${((1 - PARALLAX_IMAGE_SCALE) / 2) * 100}%`;

export const staticStyles = makeStyles(() => ({
  imageClip: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    overflow: 'hidden',
  },
  imageMover: {
    width: MOVER_WIDTH_PERCENT,
    height: '100%',
    marginLeft: MOVER_MARGIN_LEFT_PERCENT,
  },
  imageSlot: {
    width: '100%',
    height: '100%',
    position: 'relative',
    overflow: 'hidden',
  },
}));