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

export const staticStyles = makeStyles((theme) => ({
  root: {
    position: 'relative',
    overflow: 'hidden',
  },
  slide: {
    overflow: 'hidden',
  },
  dotsContainer: {
    gap: theme.spacing[1],
    marginBottom: theme.spacing[3],
    zIndex: 16,
    width: '100%',
    alignItems: 'center',
    position: 'absolute',
    justifyContent: 'center',
    bottom: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
  },
  carouselDots: {
    borderRadius: theme.border.radius[6],
  },
  selectedDots: {
    width: theme.spacing['1.5'],
    height: theme.spacing['1.5'],
    overflow: 'hidden',
    borderRadius: theme.border.radius[6],
    backgroundColor: theme.color.background.neutral,
  },
  activeDots: {
    width: theme.spacing['1.5'],
    height: theme.spacing['1.5'],
    borderRadius: theme.border.radius[4],
  },
  inActiveDots: {
    width: theme.spacing[1],
    height: theme.spacing[1],
    borderRadius: theme.border.radius[4],
  },
  customIconContainer: {
    width: theme.spacing['1.5'],
    height: theme.spacing['1.5'],
    alignItems: 'center',
    justifyContent: 'center',
  },
}));