@layer components {
  .ui-text-title {
    @apply font-sans font-bold text-cool-black;
    @apply text-title-xs xs:text-title xl:text-title-xl;
    @apply tracking-[-0.015em] xs:tracking-[-0.02em] xl:tracking-[-0.02em];
  }

  .ui-text-h1 {
    @apply font-sans font-bold text-cool-black;
    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
    @apply tracking-[-0.0125em] xs:tracking-[-0.015em];
  }

  .ui-text-h2 {
    @apply font-sans font-bold text-cool-black;
    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
    @apply tracking-[-0.015em] xs:tracking-[-0.01em];
  }

  .ui-text-h3 {
    @apply font-sans font-bold text-cool-black;
    @apply text-h3;
    @apply tracking-[-0.005em];
  }

  .ui-text-h4 {
    @apply font-sans font-bold text-cool-black;
    @apply text-h4;
    @apply tracking-[-0.0015em];
  }

  .ui-text-h5 {
    @apply font-sans font-bold text-cool-black;
    @apply text-h5;
    @apply tracking-[-0.0025em];
  }

  .ui-text-p1 {
    @apply font-sans font-medium text-charcoal-grey text-p1;
  }

  .ui-text-p2 {
    @apply font-sans font-medium text-charcoal-grey text-p2;
  }

  .ui-text-p3 {
    @apply font-sans font-medium text-charcoal-grey text-p3;
  }

  .ui-text-p4 {
    @apply font-sans font-medium text-charcoal-grey text-p4;
  }

  .ui-text-standfirst {
    @apply font-sans font-light text-active-orange;
    @apply text-standfirst xl:text-standfirst-xl;
    @apply tracking-tight xl:tracking-[-0.015em];
  }

  .ui-text-quote {
    @apply font-sans font-normal text-cool-black;
    @apply text-quote leading-normal;
    @apply tracking-[-0.0015em];
  }

  .ui-text-sub-header {
    @apply font-sans font-semibold text-neutral-800;
    @apply text-sub-header-xs xs:text-sub-header leading-normal;
  }

  .ui-text-overline1 {
    @apply font-mono font-medium text-active-orange uppercase;
    @apply text-overline1 leading-normal;
    @apply tracking-[0.16em];
  }

  .ui-text-overline2 {
    @apply font-mono font-medium text-active-orange uppercase;
    @apply text-overline2 leading-normal;
    @apply tracking-[0.16em];
  }

  .ui-text-label1 {
    @apply font-sans text-neutral-900 text-label1 font-semibold;
  }

  .ui-text-label2 {
    @apply font-sans text-neutral-900 text-label2 font-semibold;
  }

  .ui-text-label3 {
    @apply font-sans text-neutral-900 text-label3 font-semibold;
  }

  .ui-text-label4 {
    @apply font-sans text-neutral-900 text-label4 font-semibold;
  }

  .ui-theme-dark .ui-text-label1,
  .ui-theme-dark .ui-text-label2,
  .ui-theme-dark .ui-text-label3,
  .ui-theme-dark .ui-text-label4 {
    @apply text-neutral-300;
  }

  .ui-text-code {
    @apply font-mono font-normal text-code;
  }

  .ui-text-code2 {
    @apply font-mono font-normal text-code2;
  }

  .ui-text-code-inline {
    @apply inline-flex font-mono px-[0.1875rem] py-1 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md;
  }

  .dark .ui-text-code-inline {
    @apply text-neutral-300 bg-neutral-1000 border-neutral-900;
  }

  .ui-unordered-list {
    @apply text-p1 font-medium text-charcoal-grey;
    @apply ml-8 my-4;
    @apply list-disc;
  }

  .ui-ordered-list {
    @apply text-p1 font-medium text-charcoal-grey;
    @apply ml-8 my-4;
    @apply list-decimal;
  }

  .ui-ordered-list li,
  .ui-unordered-list li {
    @apply mb-2;
  }

  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
    margin-bottom: 0;
  }

  .ui-unordered-list ul {
    @apply ml-6 my-2 list-circle;
  }

  .ui-ordered-list ol {
    @apply ml-6 my-4 list-decimal;
  }

  .ui-unordered-list ul ul {
    @apply list-square my-2;
  }

  .ui-unordered-list ul ul {
    @apply my-2;
  }

  .ui-link {
    @apply text-gui-default;
    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark;
    @apply focus:text-gui-default focus-base;
    @apply no-underline;
  }

  .ui-link-neutral {
    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark;
    @apply focus:text-charcoal-grey focus-base;
    @apply underline;
  }

  .ui-figcaption {
    @apply font-mono text-p3 text-neutral-800;
  }
}