/**
 * @file
 * Typography for the MSU Extension theme.
 */

/* @layer typography { */

  /* Font */
  .font-sans {
    font-family: var(--msu-font-sans);
  }
  .font-serif {
    font-family: var(--msu-font-serif);
  }
  .font-display {
    font-family: var(--msu-font-display);
  }
  .font-decorative {
    font-family: var(--msu-font-decorative);
  }
  .font-monospace {
    font-family: var(--msu-font-monospace);
  }
  .font-script {
    font-family: var(--msu-font-script);
  }
  .font-fantasy {
    font-family: var(--msu-font-fantasy);
  }
  .font-handwriting {
    font-family: var(--msu-font-handwriting);
  }

  /* Text Size */
  .display-1,
  .text-10xl {
    font-size: var(--msu-text-10xl);
  }
  .display-2,
  .text-9xl {
    font-size: var(--msu-text-9xl);
  }
  .display-3,
  .text-8xl {
    font-size: var(--msu-text-8xl);
  }
  .display-4,
  .text-7xl {
    font-size: var(--msu-text-7xl);
  }
  .display-5,
  .text-6xl {
    font-size: var(--msu-text-6xl);
  }
  .display-6,
  .text-5xl {
    font-size: var(--msu-text-5xl);
  }
  .h1,
  .text-4xl {
    font-size: var(--msu-text-4xl);
  }
  .h2,
  .text-3xl {
    font-size: var(--msu-text-3xl);
  }
  .h3,
  .text-2xl {
    font-size: var(--msu-text-2xl);
  }
  .h4,
  .text-xl {
    font-size: var(--msu-text-xl);
  }
  .h5,
  .text-lg {
    font-size: var(--msu-text-lg);
  }
  .h6,
  .text-md {
    font-size: var(--msu-text-md);
  }
  .small,
  .text-sm {
    font-size: var(--msu-text-sm);
  }
  .tiny,
  .text-xs {
    font-size: var(--msu-text-xs);
  }

  .lead {
    font-size: var(--msu-text-lg);
    /* font-weight: 300; */
    line-height: 1.6;
  }

  /**
  * Lists
  *
  * Any time `content: "\200B";` is used, it is to fix unstyled lists not being read as a list by VoiceOver.
  */
  .list-unstyled {
    list-style: none;
    padding-left: 0;
  }
  .list-unstyled li {
    content: "\200B";
  }
  .list-inline {
    list-style: none;
    padding-left: 0;
  }
  .list-inline li {
    display: inline-block;
    content: "\200B";
  }
  .list-stack {
    list-style: none;
    padding-left: 0;
    display: flex;
    gap: var(--msu-gap);
    flex-wrap: wrap;
  }
  .list-stack li {
    content: "\200B";
  }
  .list-stack--horizontal {
    flex-direction: row;
  }
  .list-stack--vertical {
    flex-direction: column;
  }

  /* Text Align */
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-justify {
    text-align: justify;
  }
  .text-start {
    text-align: start;
  }
  .text-end {
    text-align: end;
  }

  /* Text Overflow */
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .text-clip {
    text-overflow: clip;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Text Transform */
  .normal-case {
    text-transform: none;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }

  /* Text Wrapping */
  .text-wrap {
    text-wrap: wrap;
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }

  /* Text Colors */
  .text-maroon,
  .text-primary,
  .text-msu-maroon {
    color: var(--msu-maroon);
  }
  .text-white,
  .text-secondary,
  .text-msu-white {
    color: var(--msu-white);
  }

/* } */