.animated-values {
  @extend .has-base-font-size;
  @apply
    flex;

  &.inline {
    @apply
      justify-between
      flex-nowrap;

    .animated-title {
      @apply
        basis-[500px];
    }

    .animated-content {
      @apply
        flex-auto
        flex
        flex-nowrap;

      span {
        @apply
          last:ml-1;
      }
    }
  }

  &.big {
    @apply
      flex-col;

    .animated-content {
      @apply
        mb-6
        flex;

      span {
        @apply
          text-2xl
          leading-tight
          whitespace-nowrap
          lg:text-3xl
          font-thin;

        &.value {
          @apply
            mr-1
            font-light;
        }
      }
    }

    .animated-title {
      @extend .has-xs-font-size;
      @apply
        font-mono
        max-w-xs
        order-2;
    }
  }
}
