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",
          },
        },
      });
    },
    require("@tailwindcss/line-clamp"),
    require("tailwind-scrollbar")({ nocompatible: true }),
  ],
  theme: {
    extend: {
      backgroundImage: {
        'main': "url('/src/assets/svg/background.svg')",
      },
      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)",
      },
    },
  },
};