@import "sass-zero/variables";
@import "sass-zero/mixins";

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

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

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

.txt--truncate {
  @include truncate;
}

.txt--highlight {
  background-color: #e2e8f0;
  margin-left: 3px;
  padding: 0 0.2em;
  border-radius: 4rem 2rem 4.2rem 1.1rem;
  box-shadow: 0.2em 0 0 #e2e8f0, -0.2em 0 0 #e2e8f0;
}

.txt--highlight-underline {
  background-image: url('data:image/svg+xml,<svg height="11" viewBox="0 0 284 11" width="284" 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%
}

.txt--highlight-bottom {
  border-bottom: $border solid #e2e8f0;
  box-shadow: inset 0 -6px 0 #e2e8f0;
  font-style: normal;
}

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

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

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

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

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

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

.txt--strike {
  text-decoration: line-through;
}

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