function Helper() {
  this.withOpacityValue = function (variable) {
    return ({ opacityValue }) => {
      if (opacityValue === undefined) {
        return `rgb(var(${variable}))`;
      }
      return `rgb(var(${variable}) / ${opacityValue})`;
    };
  };

  this.makeSkinTextColors = function (key) {
    let obj = {};
    obj[key] = this.withOpacityValue(`--color-${key}-text-base`);
    obj[`${key}-muted`] = this.withOpacityValue(`--color-${key}-text-muted`);
    obj[`${key}-inverted`] = this.withOpacityValue(`--color-${key}-text-inverted`);

    return obj;
  };

  this.makeSkinBackgrounds = function (key) {
    let obj = {};
    obj[key] = this.withOpacityValue(`--color-${key}`);
    obj[`${key}-disabled`] = this.withOpacityValue(`--color-${key}-disabled`);
    obj[`${key}-hover`] = this.withOpacityValue(`--color-${key}-hover`);
    obj[`${key}-disabled-hover`] = this.withOpacityValue(`--color-${key}-disabled-hover`);

    return obj;
  };
  this.makeSkinBorder = function (key) {
    let obj = {};
    obj[key] = this.withOpacityValue(`--color-${key}-border`);
    obj[`${key}-hover`] = this.withOpacityValue(`--color-${key}-border-hover`);

    return obj;
  };

  this.makeSkinShadows = function (key) {
    let obj = {};
    obj[key] = this.withOpacityValue(`--color-${key}-glow`);
    obj[`${key}-disabled`] = this.withOpacityValue(`--color-${key}-glow`);

    return obj;
  };

  this.luminanced = function (key, additionalStops = []) {
    let obj = {};
    obj['50'] = this.withOpacityValue(`--color-${key}-50`);
    for (let index = 0; index < additionalStops.length; index++) {
      const element = additionalStops[index];
      obj[element] = this.withOpacityValue(`--color-${key}-${element}`);
    }
    for (let index = 100; index <= 900; index += 100) {
      obj[index.toString()] = this.withOpacityValue(`--color-${key}-${index}`);
    }
    return obj;
  };
}

const ColorHelper = new Helper();

/**
 * @type { import('@types/tailwindcss/tailwind-config').TailwindConfig }
 */
module.exports = {
  content: ['./src/**/*.{jsx,tsx}'],
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '840px',
          paddingLeft: '0.5rem',
          paddingRight: '0.5rem',
          '@screen sm': {
            maxWidth: 'calc(100% - 30px)',
          },
          '@screen md': {
            maxWidth: 'calc(100% - 30px)',
          },
          '@screen lg': {
            maxWidth: '840px',
          },
          '@screen xl': {
            maxWidth: '840px',
          },
          '@screen 2xl': {
            maxWidth: '840px',
          },
        },
      });
    },
  ],
  theme: {
    extend: {
      screens: {
        tall: { raw: '(min-height: 1200px) and (orientation: portrait)' },
        skewed: { raw: '(max-height: 600px)' },
        "1.5xl": '1300px',
      },
      height: {
        'half-screen': '50vh',
      },
      minHeight: {
        'half-screen': '50vh',
      },
      colors: {
        aside: 'var(--color-aside)',
        main: 'var(--color-body)',
        header: '#191D2B',
        transparent: 'transparent',
        current: 'currentColor',
        white: '#ffffff',
        black: '#000000',
        serv: ColorHelper.luminanced('serv'),
        blue: ColorHelper.luminanced('blue'),
        gray: ColorHelper.luminanced('gray', [75]),
      },
      gridTemplateColumns: {
        'layout': 'min-content 7fr',
      },
      gridTemplateRows: {
        'page': '3.5rem calc(100vh - 3.5rem)'
      }
    },
  },
};