@import "sass-zero/variables";
@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;
  }

  &--truncate {
    @include truncate;
  }

  &--highlight {
    background-color: $gray-300;
    margin-left: 3px;
    padding: 0 0.2em;
    border-radius: 4rem 2rem 4.2rem 1.1rem;
    box-shadow: 0.2em 0 0 $gray-300, -0.2em 0 0 $gray-300;
  }

  &--highlight-underline {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 284 11" fill="%23e2e8f0" xmlns="http://www.w3.org/2000/svg"><path d="m31.803886 8.47027008c68.843749-9.56054688 255.210937-9.56054693 250.988281-9.56054688-4.222656.00000006-250.9882818 16.4023438-250.9882818 16.4023438s-68.8437485 2.71875.0000008-6.84179692z" fill-rule="evenodd" transform="matrix(.99862953 .05233596 -.05233596 .99862953 .57616 -7.423532)"/></svg>');
    background-repeat: no-repeat;
    background-position: center 103%;
    background-size: 105%
  }

  &--highlight-bottom {
    border-bottom: $border solid $gray-300;
    box-shadow: inset 0 -6px 0 $gray-300;
    font-style: normal;
  }

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

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

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

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

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

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

  &--sentence-case::first-letter {
    text-transform: uppercase;
  }

  &--strike {
    text-decoration: line-through;
  }

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

.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;
  }
}