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

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

.txt--sm {
  font-size: $text-sm;
}

.txt--md {
  font-size: $text-base;
}

.txt--lg {
  font-size: $text-lg;
}

.txt--xl {
  font-size: $text-xl;
}

.txt--2xl {
  font-size: $text-2xl;
}

.txt--3xl {
  font-size: $text-3xl;
}

.txt--4xl {
  font-size: $text-4xl;
}

.txt--5xl {
  font-size: $text-5xl;
}

.txt--6xl {
  font-size: $text-6xl;
}

.txt--nowrap {
  white-space: nowrap;
}

.txt--break-words {
  word-wrap: break-word;
}

.txt--break-all {
  word-break: break-all;
}

.txt--ellipsis {
  @include ellipsis;
}

.txt--normal {
  font-weight: $font-normal;
}

.txt--bold {
  font-weight: $font-bold;
}

.txt--subtle {
  color: $gray-700;
}

.txt--very-subtle {
  color: $gray-600;
}

.txt--underline {
  text-decoration: underline;
}

.txt--uppercase {
  text-transform: uppercase;
}

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

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

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

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

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

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

.decorated {
  color: $blue-500;
  text-decoration: underline;
}

.decorated--subtle {
  color: $gray-700;
  font-weight: $font-normal;
  &:hover { text-decoration: underline; }
}