import { css } from '@emotion/react';

import { GumOpacityUtils } from '../models';

/**
 * Generates opacity CSS utils for 0% - 100% in 10% steps
 */
export const generateOpacityUtils: () => GumOpacityUtils = () => {
  const opacity = {} as GumOpacityUtils;

  for (let i = 1; i < 10; i++) {
    opacity[`o${i * 10}`] = css`
      opacity: ${`0.${i}`};
    `;
  }

  return opacity;
};