@layer onyx.utility {
  .onyx-text {
    font-weight: var(--onyx-font-weight-regular);
    font-size: var(--onyx-font-size-md);
    line-height: var(--onyx-font-line-height-md);
    text-wrap: balance;

    &--small {
      font-size: var(--onyx-font-size-sm);
      line-height: var(--onyx-font-line-height-sm);
    }

    &--large {
      font-size: var(--onyx-font-size-lg);
      line-height: var(--onyx-font-line-height-lg);
    }

    &--monospace {
      font-family: var(--onyx-font-family-mono);
    }
  }

  // when adding styles for new truncation types, make sure to also add them inside types/fonts.ts
  .onyx-truncation {
    &-ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-multiline {
      // needed to wrap the text to a newline even when its one long word,
      // otherwise the max width would be overflown
      overflow-wrap: anywhere;
      hyphens: auto;
    }
  }
}