@use '@mezzanine-ui/system/typography' as typography;

.#{typography.$semantic-prefix} {
  @each $type in typography.$semantic-semantic-types {
    &--#{$type} {
      margin: 0;
      white-space: pre-line;

      @include typography.smooth-font();
      @include typography.semantic-variable($type);
    }
  }

  &--align {
    text-align: var(--#{typography.$semantic-prefix}-align);
  }

  &--color {
    color: var(--#{typography.$semantic-prefix}-color);
  }

  &--display {
    display: var(--#{typography.$semantic-prefix}-display);
  }

  &--ellipsis {
    @include typography.overflow-ellipsis();
  }

  &--nowrap {
    @include typography.nowrap();
  }
}