const plugin = require("tailwindcss/plugin");

module.exports = plugin(function ({ addUtilities }) {
  addUtilities({
    ".para-lg, .para-md, .para-sm, .para-xs": {
      "@apply font-body": {},
    },

    ".para-lg": {
      "@apply text-para-lg": {},
    },

    ".para-md": {
      "@apply text-para-md": {},
    },

    ".para-sm": {
      "@apply text-para-sm": {},
    },

    ".para-xs": {
      "@apply text-para-xs": {},
    },

    /* labels */

    ".label-lg, .label-md, .label-sm, .label-xs, .label-xxs": {
      "@apply font-body font-semibold": {},
    },

    ".label-lg": {
      "@apply text-label-lg": {},
    },

    ".label-md": {
      "@apply text-label-md": {},
    },

    ".label-sm": {
      "@apply text-label-sm": {},
    },

    ".label-xs": {
      "@apply text-label-xs": {},
    },

    ".label-xxs": {
      "@apply text-label-xxs": {},
    },

    /* standard subheadings */

    ".subheading-1, .subheading-2, .subheading-3, .subheading-4": {
      "@apply font-body font-[500]": {},
    },

    ".subheading-1": {
      "@apply text-subheading-1": {},
    },

    ".subheading-2": {
      "@apply text-subheading-2": {},
    },

    ".subheading-3": {
      "@apply text-subheading-3": {},
    },

    ".subheading-4": {
      "@apply text-subheading-4": {},
    },

    /* standard headings */

    ".heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6": {
      "@apply font-body font-bold": {},
    },

    ".heading-1": {
      "@apply text-heading-1": {},
    },

    ".heading-2": {
      "@apply text-heading-2": {},
    },

    ".heading-3": {
      "@apply text-heading-3": {},
    },

    ".heading-4": {
      "@apply text-heading-4": {},
    },

    ".heading-5": {
      "@apply text-heading-5": {},
    },

    ".heading-6": {
      "@apply text-heading-6": {},
    },

    /* display headings */

    ".display-1, .display-2, .display-3, .display-4": {
      "@apply font-display font-bold": {},
    },

    ".display-1": {
      "@apply text-display-1": {},
    },

    ".display-2": {
      "@apply text-display-2": {},
    },

    ".display-3": {
      "@apply text-display-3": {},
    },

    ".display-4": {
      "@apply text-display-4": {},
    },

    /* branded headings */

    ".branded-heading-1, .branded-heading-2, .branded-heading-3, .branded-heading-4, .branded-heading-5, .branded-heading-6":
      {
        "@apply font-branded font-bold": {},
      },

    ".branded-heading-1": {
      "@apply text-heading-1": {},
    },

    ".branded-heading-2": {
      "@apply text-heading-2": {},
    },

    ".branded-heading-3": {
      "@apply text-heading-3": {},
    },

    ".branded-heading-4": {
      "@apply text-heading-4": {},
    },

    ".branded-heading-5": {
      "@apply text-heading-5": {},
    },

    ".branded-heading-6": {
      "@apply text-heading-6": {},
    },

    ".coco-branded-heading-6": {
      "@apply font-branded text-heading-6 font-bold": {},
    },

    /* branded display headings */

    ".branded-display-1, .branded-display-2, .branded-display-3, .branded-display-4":
      {
        "@apply font-branded font-bold": {},
      },

    ".branded-display-1": {
      "@apply text-display-1": {},
    },

    ".branded-display-2": {
      "@apply text-display-2": {},
    },

    ".branded-display-3": {
      "@apply text-display-3": {},
    },

    ".branded-display-4": {
      "@apply text-display-4": {},
    },
  });
});