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

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