.redText {
  color: $red-color;
}

.blueText {
  color: $blue-color;
}

.greenText {
  color: $green-color;
}

.yellowText {
  color: $yellow-color;
}

.cyanText {
  color: $cyan-color;
}

.purpleText {
  color: $purple-color;
}

.brownText {
  color: $brown-color;
}

.pinkText {
  color: $pink-color;
}

.grayText {
  color: $gray-color;
}

.orangeText {
  color: $orange-color;
}

.whiteText {
  color: $white-color;
}

.blackText {
  color: $black-color;
}

/* Tweak these to be consistent with how bootstrap does sizing. */
span.bigText {
  font-size: $font-size-lg;
}

span.smallText {
  font-size: $font-size-sm;
}

span.leftText {
  display: block;
  text-align: left;
}

span.centerText {
  display: block;
  text-align: center;
}

span.rightText {
  display: block;
  text-align: right;
}

span.justifyText {
  display: block;
  text-align: justify;
}

div.indentText {
  padding-left: 5%;
}

.character-avatar {
  display: inline;
  height: 100px;
  width: 100px;
  &.icon {
    height: 50px;
    width: 50px;
  }
}

.bbcode {
  white-space: pre-wrap;
  .row > * {
    margin-bottom: 5px;
  }
}

.bbcode-collapse-header {
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  min-height: $line-height-base;
}

.bbcode-collapse-body {
  margin-left: 0.5rem;
  transition: height 0.2s;
  overflow-y: hidden;

  &.closed {
    padding: 0;
  }
}

.bbcode {
  @include force-word-wrapping;
  max-width: 100%;
  a {
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}

.link-domain {
  color: $text-muted;
  text-shadow: none;
}

.user-link {
  text-shadow: none;
}


.bbcode {
  .fa-link {
      color: var(--linkForcedColor);
      margin-right: 2px;
  }

  a.user-link {
      color: var(--linkForcedColor);
  }
}