.#{$n}-character-count {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: right;
  height: $buttonsize;
  padding: 0 $spacer 0 $spacer * 0.5;
  transform: translateX(100%);
  transition:
    transform $transition,
    opacity 0.2s 0.2s ease;
  opacity: 0;
  font-size: $fontsize-small;
  font-weight: $fontweight-bold;
  line-height: 1;
  text-align: right;
  pointer-events: none;

  span {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: right;
  }
}

.#{$n}-character-warning .#{$n}-character-count,
.#{$n}-character-exceeded .#{$n}-character-count {
  transform: translateX(0%);
  opacity: 1;
}

.#{$n}-character-exceeded .#{$n}-character-count span {
  color: $negative;
}