/*
 * Internal text utilities
 * These are *not* exported for use outside of components.
 */
@layer utilities {
  /* paragraphs */

  .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;
  }

  /* 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;
  }
}

/*
 * Public text utilities
 * These are exported as utility classes for use outside of components.
 */

/* standard subheadings */

.coco-subheading-1 {
  @apply subheading-1;

  &:not([data-resize="false"]) {
    @apply max-sm:subheading-4 sm:max-md:subheading-3 md:max-lg:subheading-2;
  }
}

.coco-subheading-2 {
  @apply subheading-2;

  &:not([data-resize="false"]) {
    @apply max-md:subheading-4 md:max-lg:subheading-3;
  }
}

.coco-subheading-3 {
  @apply subheading-3;

  &:not([data-resize="false"]) {
    @apply max-md:subheading-4;
  }
}

.coco-subheading-4 {
  @apply subheading-4;
}

/* standard headings */

.coco-heading-1 {
  @apply heading-1;

  &:not([data-resize="false"]) {
    @apply max-md:heading-3 md:max-lg:heading-2;
  }
}

.coco-heading-2 {
  @apply heading-2;

  &:not([data-resize="false"]) {
    @apply max-md:heading-4 md:max-lg:heading-3;
  }
}

.coco-heading-3 {
  @apply heading-3;

  &:not([data-resize="false"]) {
    @apply max-md:heading-5 md:max-lg:heading-4;
  }
}

.coco-heading-4 {
  @apply heading-4;

  &:not([data-resize="false"]) {
    @apply max-md:heading-5;
  }
}

.coco-heading-5 {
  @apply heading-5;

  &:not([data-resize="false"]) {
    @apply max-md:heading-6;
  }
}

.coco-heading-6 {
  @apply heading-6;
}

/* display headings */

.coco-display-1 {
  @apply display-1;

  &:not([data-resize="false"]) {
    @apply max-md:display-3 md:max-lg:display-2;
  }
}

.coco-display-2 {
  @apply display-2;

  &:not([data-resize="false"]) {
    @apply max-md:display-4 md:max-lg:display-3;
  }
}

.coco-display-3 {
  @apply display-3;

  &:not([data-resize="false"]) {
    @apply max-md:heading-1 md:max-lg:display-4;
  }
}

.coco-display-4 {
  @apply display-4;

  &:not([data-resize="false"]) {
    @apply max-md:heading-2 md:max-lg:heading-1;
  }
}

/* branded headings */

.coco-heading-1-branded {
  @apply branded-heading-1;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-3 md:max-lg:branded-heading-2;
  }
}

.coco-heading-2-branded {
  @apply branded-heading-2;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-4 md:max-lg:branded-heading-3;
  }
}

.coco-heading-3-branded {
  @apply branded-heading-3;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-5 md:max-lg:branded-heading-4;
  }
}

.coco-heading-4-branded {
  @apply branded-heading-4;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-5;
  }
}

.coco-heading-5-branded {
  @apply branded-heading-5;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-6;
  }
}

.coco-heading-6-branded {
  @apply branded-heading-6;
}

/* branded display headings */

.coco-display-1-branded {
  @apply branded-display-1;

  &:not([data-resize="false"]) {
    @apply max-md:branded-display-3 md:max-lg:branded-display-2;
  }
}

.coco-display-2-branded {
  @apply branded-display-2;

  &:not([data-resize="false"]) {
    @apply max-md:branded-display-4 md:max-lg:branded-display-3;
  }
}

.coco-display-3-branded {
  @apply branded-display-3;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-1 md:max-lg:branded-display-4;
  }
}

.coco-display-4-branded {
  @apply branded-display-4;

  &:not([data-resize="false"]) {
    @apply max-md:branded-heading-2 md:max-lg:branded-heading-1;
  }
}