.bc-text {
  &-number {
    display: inline-block;
    font-family: math, cursive, ui-monospace;

    &-prefix {
      margin-right: 4px;
    }

    &-unit {
      margin-left: 4px;
      font-weight: bold;
    }
  }

  &-roll {
    position: relative;
    display: inline-flex;
    overflow: hidden;

    &::before {
      content: attr(data-label);
      white-space: nowrap;
    }

    &-enable {
      &::before,
      &::after {
        content: attr(data-label);
        white-space: nowrap;
        padding-right: 2em;
        animation: text-roll var(--roll-time) linear infinite;
      }
    }
  }

  &-copy-icon {
    margin-left: 4px;
    color: var(--color-primary, #3b82f6);

    &.success {
      color: #24b588;
    }

    &.error {
      color: #f44336;
    }
  }
}

@keyframes text-roll {
  0%,
  10% {
    transform: translateX(0);
  }
  90%,
  100% {
    transform: translateX(-100%);
  }
}