@import "sass-zero/variables/typography";
@import "sass-zero/variables/spacing";
@import "sass-zero/variables/border";
@import "sass-zero/variables/colors";
@import "sass-zero/mixins";

.txt {
  &--xs {
    font-size: $text-xs;
  }

  &--sm {
    font-size: $text-sm;
  }

  &--md {
    font-size: $text-base;
  }

  &--lg {
    font-size: $text-lg;
  }

  &--xl {
    font-size: $text-xl;
  }

  &--2xl {
    font-size: $text-2xl;
  }

  &--3xl {
    font-size: $text-3xl;
  }

  &--nowrap {
    white-space: nowrap;
  }

  &--break-words {
    word-wrap: break-word;
  }

  &--break-all {
    word-break: break-all;
  }

  &--ellipsis {
    @include ellipsis;
  }

  &--highlight {
    background-color: $gray-200;
    border-radius: $rounded;
    padding: $size-0 $size-1;
  }

  &--normal {
    font-weight: $font-normal;
  }

  &--bold {
    font-weight: $font-bold;
  }

  &--subtle {
    color: $gray-700;
  }

  &--very-subtle {
    color: $gray-600;
  }

  &--underline {
    text-decoration: underline;
  }

  &--uppercase {
    text-transform: uppercase;
  }
}

.align {
  &--top {
    vertical-align: top;
  }

  &--middle {
    vertical-align: middle;
  }

  &--bottom {
    vertical-align: bottom;
  }

  &--left {
    text-align: left;
  }

  &--center {
    text-align: center;
  }

  &--right {
    text-align: right;
  }
}